/*
 * Site-wide header and footer, matched to the Lovable prototype.
 * Loaded after style.css; tokens (--ds-*) come from design.css.
 * The language picker keeps the original dropdown (style.css + script.js).
 */

/* Page background: Lovable's warm white instead of the old grey #f2f2f2.
   --main-bg is the page/section background throughout style.css (.site, catalogs, single pages, profile) */
:root {
	--main-bg: var(--ds-background);
}

/* ---------- Header ---------- */

header.header {
	font-family: var(--ds-font-sans);
	background-color: rgba(18, 32, 70, 0.95);
	/* Bottom line as an inset shadow, not a border: a border adds 1px to the header height,
	   and the home page pulls the hero up by .header-wrap height only, leaving a 1px white gap */
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Blur on a layer behind the content, not on the header itself: backdrop-filter on the header
   would make it the containing block for position: fixed children (the mobile profile drawer) */
header.header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	pointer-events: none;
}

/* Home: transparent over the hero until the page is scrolled (script.js adds .fixed) */
body.header-overlay header.header:not(.fixed):not(.side-open) {
	background-color: transparent;
	box-shadow: none;
}

body.header-overlay header.header:not(.fixed):not(.side-open)::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

header.header.fixed,
body.header-overlay header.header.fixed {
	background-color: rgba(18, 32, 70, 0.95);
}

header.header .header-wrap {
	min-height: 64px;
}

@media screen and (max-width: 575px) {
	/* style.css swaps in an icon-only logo on phones; Lovable keeps the full logo */
	header.header .header-wrap a.logo img {
		content: url(../img/discover-logo-yellow.svg);
	}

	header.header .header-wrap a.logo {
		width: 140px;
		min-width: 140px;
	}
}

@media screen and (min-width: 992px) {
	header.header .container-fluid {
		max-width: var(--ds-shell);
		padding-inline: var(--ds-gutter);
	}

	header.header .header-wrap {
		/* Side buttons sit close together like Lovable's gap-2 group;
		   the menu keeps its own space via margin below */
		gap: 0.25rem;
		min-height: 80px;
		padding: 0;
		/* center instead of space-between: with room to spare the menu's auto margins
		   still spread the items out; when enlarged text (accessibility) doesn't fit,
		   the overflow is split evenly on both sides instead of running off to the right */
		justify-content: center;
	}

	header.header .header-wrap .header-menu {
		padding-inline: 0.5rem;
	}

	header.header .header-wrap a.logo {
		width: auto;
		min-width: 0;
		height: 40px;
		flex-shrink: 0;
	}

	header.header .header-wrap a.logo img {
		width: auto;
		height: 40px;
	}

	header.header .header-wrap .header-menu ul.menu {
		gap: 0;
	}

	/* Menu items: rounded pills highlighted on hover */
	header.header .header-wrap .header-menu ul.menu li a {
		min-height: 0;
		padding: calc(0.5rem + 1px) 0.5rem calc(0.5rem - 1px);
		border: 0;
		border-radius: var(--ds-radius-full);
		font-size: 0.9375em;
		font-weight: 500;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.85);
		white-space: nowrap;
		transition: background-color var(--ds-transition), color var(--ds-transition);
	}

	header.header .header-wrap .header-menu ul.menu li a:hover,
	header.header .header-wrap .header-menu ul.menu li.is-active a {
		background-color: rgba(255, 255, 255, 0.12);
		color: #fff;
	}
}

/* Header buttons: same look at every width. On phones style.css hides them;
   the mobile block below shows them at Lovable's breakpoints (search, login 640px+; language 768px+) */

/* Round icon buttons (accessibility, search) */
header.header .header-wrap .accessibility-menu .accessibility-btn,
header.header .header-wrap .search-menu .search-form-btn {
	width: 40px;
	min-width: 40px;
	height: 40px;
	border-radius: var(--ds-radius-full);
	transition: background-color var(--ds-transition);
}

header.header .header-wrap .accessibility-menu .accessibility-btn:hover,
header.header .header-wrap .search-menu .search-form-btn:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

header.header .header-wrap .accessibility-menu .accessibility-btn::before,
header.header .header-wrap .search-menu .search-form-btn::before {
	width: 18px;
	height: 18px;
}

header.header .header-wrap .accessibility-menu .accessibility-btn:hover::before,
header.header .header-wrap .search-menu .search-form-btn:hover::before {
	background-color: #fff;
}

header.header .header-wrap .add-event-menu .add-event-btn {
	width: auto;
	min-width: 0;
	min-height: 40px;
	height: auto;
	padding: 2px 0.75rem 0;
	border-radius: var(--ds-radius-full);
	font-size: 0.9375em;
	font-weight: 500;
	color: #fff;
	transition: background-color var(--ds-transition);
}

header.header .header-wrap .add-event-menu .add-event-btn:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

header.header .header-wrap .add-event-menu .add-event-btn::before {
	width: 20px;
	min-width: 20px;
	height: 20px;
	margin-right: 6px;
}

header.header .header-wrap .add-event-menu .add-event-btn:hover::before {
	background-color: #fff;
}

/* Language dropdown: before the login button / avatar */
header.header .header-wrap .language-menu {
	order: 1;
}

header.header .header-wrap .language-menu .lang-toggle {
	width: auto;
	min-width: 0;
	min-height: 40px;
	height: auto;
	padding: 2px 0.75rem 0;
	border-radius: var(--ds-radius-full);
	font-size: 0.875em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

header.header .header-wrap .language-menu .lang-toggle:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Dropdown list: dark card with pill items, hover like the menu pills */
header.header .header-wrap .language-menu ul.menu {
	gap: 2px;
	padding: 0.25rem;
	background-color: var(--ds-ink);
	border-radius: var(--ds-radius);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 28px -12px rgba(6, 12, 40, 0.6);
}

header.header .header-wrap .language-menu ul.menu li a {
	width: auto;
	min-width: 52px;
	min-height: 36px;
	height: auto;
	padding: 2px 0.75rem 0;
	border-radius: var(--ds-radius-md);
	font-size: 0.875em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

header.header .header-wrap .language-menu ul.menu li a:hover,
header.header .header-wrap .language-menu ul.menu li a:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

header.header .header-wrap .login-menu {
	order: 2;
}

/* "Log in": translucent pill over the hero, primary on the solid header */
header.header .header-wrap .login-menu a.login-btn {
	height: auto;
	padding: calc(0.625rem + 1px) 1.125rem calc(0.625rem - 1px);
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-primary);
	font-size: 0.9375em;
	font-weight: 500;
	line-height: 1.7;
	color: #fff;
	transition: background-color var(--ds-transition);
}

header.header .header-wrap .login-menu a.login-btn:hover {
	background-color: var(--ds-primary-hover);
	color: #fff;
}

body.header-overlay header.header:not(.fixed) .header-wrap .login-menu a.login-btn {
	background-color: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body.header-overlay header.header:not(.fixed) .header-wrap .login-menu a.login-btn:hover {
	background-color: rgba(255, 255, 255, 0.22);
}

header.header .header-wrap .login-menu .user-profile-wrap {
	padding: 0;
}

/* Avatar: primary circle with a white initial, ring on hover / while the menu is open */
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-image {
	width: 40px;
	min-width: 40px;
	height: 40px;
	border: 0;
	background-color: var(--ds-primary);
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow var(--ds-transition), background-color var(--ds-transition);
}

header.header .header-wrap .login-menu .user-profile-wrap:hover .user-profile-image,
header.header .header-wrap .login-menu .user-profile-wrap.show .user-profile-image {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-image .avatar-placeholder {
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1em;
	font-weight: 600;
	color: var(--ds-primary-foreground);
}

/* Profile menu: dark card with pill items, like the language dropdown */
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content {
	top: calc(100% + 0.5rem);
	min-width: 230px;
	padding: 0.25rem;
	border: 0;
	border-radius: var(--ds-radius);
	background-color: var(--ds-ink);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 28px -12px rgba(6, 12, 40, 0.6);
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu {
	gap: 2px;
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item {
	border: 0;
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-logout {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item a,
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item form button {
	min-height: 40px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--ds-radius-md);
	font-family: var(--ds-font-sans);
	font-size: 0.9375em;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85) !important; /* style.css forces the logout color with !important */
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item a:hover,
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item form button:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff !important;
}

/* Lucide icons tinted with the text color instead of the old blue pictures */
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item[class*="user-"] a::before,
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item[class*="user-"] form button::before {
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin: 0 0.625rem 0 0;
	background-image: none;
	background-color: currentColor;
	-webkit-mask: var(--profile-ico) center / contain no-repeat;
	mask: var(--profile-ico) center / contain no-repeat;
}

header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-profile { --profile-ico: url(../img/lucide/user.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-favorites { --profile-ico: url(../img/lucide/heart.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-events { --profile-ico: url(../img/lucide/calendar-days.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-locations { --profile-ico: url(../img/lucide/map-pin.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-reviews { --profile-ico: url(../img/lucide/star.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-orders { --profile-ico: url(../img/lucide/shopping-bag.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-booking { --profile-ico: url(../img/lucide/clipboard-list.svg); }
header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item.user-logout { --profile-ico: url(../img/lucide/log-out.svg); }

/* Narrower desktops: many menu items, keep them on one line */
/* Narrower desktops: 9 menu items (Lovable has 7), keep the header within the container */
@media screen and (min-width: 992px) and (max-width: 1439px) {
	header.header .header-wrap .header-menu {
		padding-inline: 0.5rem;
	}

	header.header .header-wrap .header-menu ul.menu {
		gap: 0;
	}

	header.header .header-wrap .header-menu ul.menu li a {
		padding: calc(0.5rem + 1px) 0.5rem calc(0.5rem - 1px);
		font-size: 0.875em;
	}

	header.header .header-wrap a.logo,
	header.header .header-wrap a.logo img {
		height: 32px;
	}

	header.header .header-wrap .language-menu .lang-toggle {
		padding: 2px 0.5rem 0;
	}

	header.header .header-wrap .login-menu a.login-btn {
		padding: calc(0.5rem + 1px) 1rem calc(0.5rem - 1px);
		font-size: 0.875em;
	}
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
	header.header .header-wrap .header-menu {
		padding-inline: 0.25rem;
	}

	header.header .header-wrap .header-menu ul.menu li a {
		padding: calc(0.5rem + 1px) 0.375rem calc(0.5rem - 1px);
		font-size: 0.8125em;
	}

	header.header .header-wrap a.logo,
	header.header .header-wrap a.logo img {
		height: 28px;
	}

	header.header .header-wrap .accessibility-menu .accessibility-btn,
	header.header .header-wrap .search-menu .search-form-btn {
		width: 36px;
		min-width: 36px;
		height: 36px;
	}

	/* No room for the "Add" label next to 9 menu items: round icon button like search */
	header.header .header-wrap .add-event-menu .add-event-btn {
		justify-content: center;
		width: 36px;
		min-width: 36px;
		min-height: 36px;
		height: 36px;
		padding: 0;
		font-size: 0;
	}

	header.header .header-wrap .add-event-menu .add-event-btn::before {
		width: 18px;
		min-width: 18px;
		height: 18px;
		margin-right: 0;
	}
}

/* Header icons from Lovable (Lucide); accessibility keeps its own icon (not in Lovable) */
header.header .header-wrap .search-menu .search-form-btn::before {
	-webkit-mask-image: url(../img/lucide/search.svg);
	mask-image: url(../img/lucide/search.svg);
}

header.header .header-wrap .header-menu-btn::before {
	background: #fff;
	-webkit-mask: url(../img/lucide/menu.svg) center / contain no-repeat;
	mask: url(../img/lucide/menu.svg) center / contain no-repeat;
}

header.header.side-open .header-wrap .header-menu-btn::before {
	background-image: none;
}

/* Cross only for the burger menu; side-open is also set while the profile drawer is open */
body:has(.mobile-menu.show) header.header .header-wrap .header-menu-btn::before {
	-webkit-mask-image: url(../img/lucide/x.svg);
	mask-image: url(../img/lucide/x.svg);
}

header.header .header-wrap .add-event-menu .add-event-btn::before {
	-webkit-mask-image: url(../img/lucide/plus.svg);
	mask-image: url(../img/lucide/plus.svg);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	border-radius: 0;
}

header.header .header-wrap .language-menu .lang-toggle::after {
	width: 14px;
	height: 14px;
	border: 0;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	transform: none;
}

header.header .header-wrap .language-menu:hover .lang-toggle::after,
header.header .header-wrap .language-menu.open .lang-toggle::after {
	transform: rotate(180deg);
}

/* ---------- Header: tablets and phones (Lovable: logo left, buttons + burger right) ---------- */

@media screen and (max-width: 991px) {
	header.header .container-fluid {
		padding-inline: var(--ds-gutter);
	}

	header.header .header-wrap {
		gap: 0.5rem;
		min-height: 80px;
		padding: 0;
		justify-content: flex-start;
	}

	header.header .header-wrap a.logo {
		order: -1;
		width: auto;
		min-width: 0;
		height: 32px;
		margin: 0 auto 0 0;
		flex-shrink: 0;
	}

	header.header .header-wrap a.logo img {
		width: auto;
		height: 32px;
	}

	header.header .header-wrap .header-menu-btn,
	header.header .header-wrap:has(.login-menu .user-profile-wrap) .header-menu-btn {
		order: 10;
		width: 40px;
		min-width: 40px;
		height: 40px;
		margin: 0;
		border-radius: var(--ds-radius-full);
		transition: background-color var(--ds-transition);
	}

	header.header .header-wrap .header-menu-btn:hover {
		background-color: rgba(255, 255, 255, 0.12);
	}

	header.header .header-wrap .header-menu-btn::before {
		width: 20px;
		height: 20px;
	}

	header.header.side-open,
	body.header-overlay header.header.side-open {
		background-color: rgba(18, 32, 70, 0.95);
	}

	header.header .header-wrap .search-menu,
	header.header .header-wrap .login-menu:has(a.login-btn),
	header.header .header-wrap .language-menu {
		display: none;
	}

	/* Profile drawer from the right (style.css), dark like the menu panel, under the 80px header */
	header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content {
		top: 80px;
		right: -280px;
		width: 100%;
		min-width: 0;
		max-width: 280px;
		height: calc(100% - 80px);
		padding: 1.25rem 1rem;
		border-radius: 0;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), -12px 0 28px -12px rgba(6, 12, 40, 0.6);
	}

	header.header .header-wrap .login-menu .user-profile-wrap.show .user-profile-content {
		right: 0;
	}

	header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu {
		gap: 0.25rem;
	}

	header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item a,
	header.header .header-wrap .login-menu .user-profile-wrap .user-profile-content .profile-menu .menu-item form button {
		padding: 0.625rem 0.75rem;
		font-size: 1em;
	}

	/* Dropdown panel under the header instead of the side drawer */
	.mobile-menu {
		top: 80px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: calc(100dvh - 80px);
		padding: 0;
		overflow-y: auto;
		background-color: var(--ds-ink);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--ds-transition), visibility var(--ds-transition);
		font-family: var(--ds-font-sans);
	}

	.mobile-menu.show {
		left: 0;
		opacity: 1;
		visibility: visible;
	}

	/* Lovable has no dimmed backdrop behind the menu */
	body:has(.mobile-menu.show) .aside-bg {
		opacity: 0;
		pointer-events: none;
	}

	.mobile-menu .mobile-wrap {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: auto;
		padding: 1.25rem var(--ds-gutter);
		overflow: visible;
	}

	.mobile-menu .mobile-wrap .side-menu {
		order: 0;
		display: grid;
		gap: 0.25rem;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.mobile-menu .mobile-wrap .side-menu .menu-item a {
		display: block;
		padding: 0.625rem 0.75rem;
		border-radius: var(--ds-radius-md);
		font-size: 1em;
		font-weight: 500;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.8);
		transition: background-color var(--ds-transition), color var(--ds-transition);
	}

	.mobile-menu .mobile-wrap .side-menu .menu-item a:hover,
	.mobile-menu .mobile-wrap .side-menu .menu-item.is-active a {
		background-color: rgba(255, 255, 255, 0.1);
		color: #fff;
	}

	/* Login / add-event button below the links, then accessibility */
	.mobile-menu .mobile-wrap .profile-menu {
		order: 1;
		display: grid;
		gap: 0.25rem;
		width: 100%;
		margin: 0.75rem 0 0;
		padding: 0;
		border: 0;
	}

	.mobile-menu .mobile-wrap .profile-menu a.profile-btn,
	.mobile-menu .mobile-wrap .profile-menu .add-event-btn {
		width: 100%;
		padding: 0.75rem 1rem;
		border: 0;
		border-radius: var(--ds-radius-md);
		background-color: var(--ds-primary);
		font-size: 1em;
		font-weight: 600;
		line-height: 1.5;
		color: var(--ds-primary-foreground);
	}

	.mobile-menu .mobile-wrap .profile-menu a.profile-btn:hover,
	.mobile-menu .mobile-wrap .profile-menu .add-event-btn:hover {
		background-color: var(--ds-primary-hover);
		color: var(--ds-primary-foreground);
	}

	/* Accessibility is not in Lovable: styled like a menu link */
	.mobile-menu .mobile-wrap .profile-menu .accessibility-btn {
		justify-content: flex-start;
		width: 100%;
		margin: 0.5rem 0 0;
		padding: 0.625rem 0.75rem;
		border: 0;
		border-radius: var(--ds-radius-md);
		font-size: 1em;
		font-weight: 500;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.8);
	}

	.mobile-menu .mobile-wrap .profile-menu .accessibility-btn::before {
		width: 18px;
		min-width: 18px;
		height: 18px;
		background-color: currentColor;
	}

	.mobile-menu .mobile-wrap .profile-menu .accessibility-btn:hover {
		background-color: rgba(255, 255, 255, 0.1);
		color: #fff;
	}

	.mobile-menu .mobile-wrap .profile-menu .accessibility-btn:hover::before {
		background-color: currentColor;
	}

	/* Languages: "UA · EN · RU" like Lovable's switcher */
	.mobile-menu .mobile-wrap .addon-menu {
		order: 2;
		width: 100%;
		margin: 0;
		padding: 0.625rem 0.75rem 0;
		border: 0;
	}

	.mobile-menu .mobile-wrap .addon-menu .lang-menu {
		gap: 0.25rem;
	}

	.mobile-menu .mobile-wrap .addon-menu .lang-menu .lang-item {
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
	}

	.mobile-menu .mobile-wrap .addon-menu .lang-menu .lang-item + .lang-item::before {
		content: '·';
		color: rgba(255, 255, 255, 0.4);
	}

	.mobile-menu .mobile-wrap .addon-menu .lang-menu .lang-item a {
		font-size: 0.875em;
		font-weight: 500;
		color: #fff;
	}

	.mobile-menu .mobile-wrap .addon-menu .lang-menu .lang-item:not(.current-menu-item) a {
		opacity: 0.7;
	}

	.mobile-menu .mobile-wrap .addon-menu .lang-menu .lang-item a:hover {
		opacity: 1;
		color: #fff;
	}

	/* Socials live in the footer; Lovable's menu has none */
	.mobile-menu .mobile-wrap .socials-menu {
		display: none;
	}
}

@media screen and (min-width: 640px) and (max-width: 991px) {
	header.header .header-wrap a.logo,
	header.header .header-wrap a.logo img {
		height: 40px;
	}

	header.header .header-wrap .search-menu,
	header.header .header-wrap .login-menu:has(a.login-btn) {
		display: flex;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	header.header .header-wrap .language-menu {
		display: flex;
	}

	.mobile-menu .mobile-wrap .addon-menu {
		display: none;
	}
}

/* ---------- Popups: search, add, login (Lovable has none; built from its tokens) ---------- */

.login-popup,
.search-popup,
.event-popup {
	/* flex instead of style.css's inline-block + ::before centering: with a full-width box that trick
	   wrapped the box onto a second line on phones (popup stuck at the bottom, pale strip below it) */
	display: flex;
	padding: 1.25rem;
	background: rgba(18, 32, 70, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-family: var(--ds-font-sans);
}

.login-popup::before,
.search-popup::before,
.event-popup::before {
	display: none;
}

.login-popup .popup-box,
.search-popup .popup-box,
.event-popup .popup-box {
	width: 100%;
	max-width: 560px;
	/* centers, and a form taller than the screen still scrolls from its top */
	margin: auto;
}

.login-popup .popup-wrap,
.search-popup .popup-wrap,
.event-popup .popup-wrap {
	max-width: none;
	padding: 2rem;
	border: 0;
	border-radius: var(--ds-radius-xl);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

/* Close: round icon button, Lucide x */
.login-popup .popup-wrap .popup-top span.close-login-btn,
.search-popup .popup-wrap .popup-top span.close-search-btn,
.event-popup .popup-wrap .popup-top span.close-event-btn {
	top: 1rem;
	right: 1rem;
	width: 36px;
	min-width: 36px;
	height: 36px;
	border-radius: var(--ds-radius-full);
	background-image: none;
	transition: background-color var(--ds-transition);
}

.login-popup .popup-wrap .popup-top span.close-login-btn::before,
.search-popup .popup-wrap .popup-top span.close-search-btn::before,
.event-popup .popup-wrap .popup-top span.close-event-btn::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: var(--ds-ink-soft);
	-webkit-mask: url(../img/lucide/x.svg) center / contain no-repeat;
	mask: url(../img/lucide/x.svg) center / contain no-repeat;
}

.login-popup .popup-wrap .popup-top span.close-login-btn:hover,
.search-popup .popup-wrap .popup-top span.close-search-btn:hover,
.event-popup .popup-wrap .popup-top span.close-event-btn:hover {
	background-color: var(--ds-muted);
}

.login-popup .popup-wrap .popup-content .popup-content-inner p.h2,
.login-popup .popup-wrap .popup-content .login-form p.h2,
.search-popup .popup-wrap .popup-content > p.h2,
.event-popup .popup-wrap .popup-content > p.h2 {
	/* full row (forms wrap their fields), clear of the close button */
	width: 100%;
	margin: 0 0 1.25rem;
	padding-right: 2.5rem;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3333;
	color: var(--ds-ink);
}

/* Search: field with a search icon + primary button, like the hero search */
.search-popup .popup-wrap .popup-content .search-form {
	flex-wrap: nowrap;
	gap: 0.625rem;
}

.search-popup .popup-wrap .popup-content .search-form .form-item {
	width: auto;
	margin: 0;
}

.search-popup .popup-wrap .popup-content .search-form .form-item:first-child {
	flex: 1;
	min-width: 0;
}

.search-popup .popup-wrap .popup-content .search-form .form-item:first-child::before {
	content: '';
	position: absolute;
	left: 1rem;
	top: 50%;
	width: 18px;
	height: 18px;
	background-color: var(--ds-muted-foreground);
	-webkit-mask: url(../img/lucide/search.svg) center / contain no-repeat;
	mask: url(../img/lucide/search.svg) center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}

.search-popup .popup-wrap .popup-content .search-form .form-item input {
	height: 48px;
	padding: 0 1rem 0 2.75rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.5;
	color: var(--ds-ink);
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.search-popup .popup-wrap .popup-content .search-form .form-item input::placeholder {
	color: var(--ds-muted-foreground);
}

.search-popup .popup-wrap .popup-content .search-form .form-item input:focus {
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.search-popup .popup-wrap .popup-content .search-form .form-item button {
	width: auto;
	height: 48px;
	padding: 2px 1.5rem 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-primary);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-primary-foreground);
	transition: background-color var(--ds-transition);
}

.search-popup .popup-wrap .popup-content .search-form .form-item button:hover {
	background-color: var(--ds-primary-hover);
}

/* Add: subtitle and two option cards */
.event-popup .popup-wrap .popup-content > p.h2 {
	margin-bottom: 0.5rem;
}

.event-popup .popup-wrap .popup-content > p.text,
.event-popup .popup-wrap .popup-content > p:not(.h2) {
	margin: 0 0 1.5rem;
	font-size: 1em;
	line-height: 1.625;
	color: var(--ds-ink-soft);
}

.event-popup .popup-wrap .popup-content ul.add-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item {
	width: auto;
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item a.item-link {
	position: relative;
	gap: 0.75rem;
	padding: 1.5rem 1rem 1.25rem;
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: inset 0 0 0 1px var(--ds-border);
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-ink);
	transition: box-shadow var(--ds-transition), color var(--ds-transition);
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item a.item-link:hover {
	box-shadow: inset 0 0 0 1px var(--ds-primary), var(--ds-shadow-card);
	color: var(--ds-primary);
}

/* Icon circle (::before) with the Lucide icon on top (::after);
   [class] outweighs style.css's per-item blue/white pictures (.list-item.add-event ...) */
.event-popup .popup-wrap .popup-content ul.add-list li.list-item[class] a.item-link::before,
.event-popup .popup-wrap .popup-content ul.add-list li.list-item[class] a.item-link:hover::before {
	width: 48px;
	min-width: 48px;
	height: 48px;
	margin: 0;
	border-radius: var(--ds-radius-full);
	background-image: none;
	background-color: var(--ds-accent);
	transition: background-color var(--ds-transition);
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item[class] a.item-link:hover::before {
	background-color: var(--ds-primary);
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item a.item-link::after {
	content: '';
	position: absolute;
	top: calc(1.5rem + 14px);
	left: 50%;
	width: 20px;
	height: 20px;
	background-color: var(--ds-primary);
	-webkit-mask: var(--add-ico) center / contain no-repeat;
	mask: var(--add-ico) center / contain no-repeat;
	transform: translateX(-50%);
	transition: background-color var(--ds-transition);
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item a.item-link:hover::after {
	background-color: var(--ds-primary-foreground);
}

.event-popup .popup-wrap .popup-content ul.add-list li.list-item.add-event { --add-ico: url(../img/lucide/calendar-days.svg); }
.event-popup .popup-wrap .popup-content ul.add-list li.list-item.add-location { --add-ico: url(../img/lucide/map-pin.svg); }

/* Login / register / reset: sign-in options, then forms with the same fields as search */
.login-popup .popup-wrap .popup-content .login-with-btns {
	display: grid;
	/* one full-width column; style.css's justify-content: space-between would shrink it to the text */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.login-popup .popup-wrap .popup-content .login-with-btns a {
	justify-content: center;
	gap: 0.75rem;
	height: 48px;
	margin: 0;
	padding: 2px 1rem 0;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-ink);
	transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.login-popup .popup-wrap .popup-content .login-with-btns a:hover {
	border-color: var(--ds-ink-soft);
	background-color: var(--ds-muted);
}

.login-popup .popup-wrap .popup-content .login-with-btns a::before {
	width: 20px;
	min-width: 20px;
	height: 20px;
	margin: -2px 0 0;
}

.login-popup .popup-wrap .popup-content .login-with-btns a.mail::before {
	width: 20px;
	height: 20px;
	background-image: none;
	background-color: var(--ds-ink);
	-webkit-mask: url(../img/lucide/mail.svg) center / contain no-repeat;
	mask: url(../img/lucide/mail.svg) center / contain no-repeat;
}

.login-popup .popup-wrap .popup-content .login-form {
	justify-content: space-between;
}

.login-popup .popup-wrap .popup-content .login-form .back-btn-wrap {
	width: 100%;
	margin-bottom: 1rem;
}

.login-popup .popup-wrap .popup-content .login-form a.back-to-socials-btn {
	display: inline-flex;
	gap: 0.5rem;
	width: auto;
	margin: 0;
	padding: 0;
	font-size: 0.9375em;
	font-weight: 500;
	color: var(--ds-ink-soft);
	transition: color var(--ds-transition);
}

.login-popup .popup-wrap .popup-content .login-form a.back-to-socials-btn::before {
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin: 0;
	background-image: none;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/arrow-left.svg) center / contain no-repeat;
	mask: url(../img/lucide/arrow-left.svg) center / contain no-repeat;
}

.login-popup .popup-wrap .popup-content .login-form a.back-to-socials-btn:hover {
	color: var(--ds-primary);
}

.login-popup .popup-wrap .popup-content .login-form .form-item {
	margin-bottom: 0.75rem;
}

.login-popup .popup-wrap .popup-content .login-form .form-item.half-item {
	width: calc(50% - 0.375rem);
}

.login-popup .popup-wrap .popup-content .login-form .form-item:last-child {
	margin: 0.5rem 0 0;
}

.login-popup .popup-wrap .popup-content .login-form .form-item input {
	height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.5;
	color: var(--ds-ink);
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.login-popup .popup-wrap .popup-content .login-form .form-item input::placeholder {
	color: var(--ds-muted-foreground);
}

.login-popup .popup-wrap .popup-content .login-form .form-item input:focus {
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* Room for the eye button; same font as the other fields (style.css gives password inputs Montserrat) */
.login-popup .popup-wrap .popup-content .login-form .form-item input[name^="password"] {
	padding-right: 3rem;
	font-family: inherit;
}

.login-popup .login-form .input-error,
.login-popup .login-form .form-item input.input-error {
	border-color: var(--ds-destructive) !important; /* style.css sets red with !important */
}

/* Show / hide password: Lucide eye, centered on the 48px field even when an error is added below */
.login-popup .popup-wrap .popup-content .login-form .form-item span.hide-password {
	top: 24px;
	right: 6px;
	width: 36px;
	min-width: 36px;
	height: 36px;
	border-radius: var(--ds-radius-full);
	background-image: none;
	transition: background-color var(--ds-transition);
}

.login-popup .popup-wrap .popup-content .login-form .form-item span.hide-password::before {
	content: '';
	position: absolute;
	inset: 8px;
	background-color: var(--ds-muted-foreground);
	-webkit-mask: url(../img/lucide/eye.svg) center / contain no-repeat;
	mask: url(../img/lucide/eye.svg) center / contain no-repeat;
}

.login-popup .popup-wrap .popup-content .login-form .form-item span.hide-password.close {
	background-image: none;
}

.login-popup .popup-wrap .popup-content .login-form .form-item span.hide-password.close::before {
	-webkit-mask-image: url(../img/lucide/eye-off.svg);
	mask-image: url(../img/lucide/eye-off.svg);
}

.login-popup .popup-wrap .popup-content .login-form .form-item span.hide-password:hover {
	background-color: var(--ds-muted);
}

.login-popup .popup-wrap .popup-content .login-form .form-item .pass-wrap span.hide-password {
	top: 50%;
}

.login-popup .popup-wrap .popup-content .login-form .form-item button {
	height: 48px;
	padding: 2px 1.5rem 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-primary);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-primary-foreground);
	transition: background-color var(--ds-transition);
}

.login-popup .popup-wrap .popup-content .login-form .form-item button:hover {
	background-color: var(--ds-primary-hover);
}

.login-popup .popup-wrap .popup-content .login-form .forgot-password {
	width: 100%;
	margin: 0 0 0.25rem;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.4286;
	text-align: right;
	color: var(--ds-primary);
}

.login-popup .popup-wrap .popup-content .login-form .forgot-password:hover {
	text-decoration: underline;
}

/* Consent checkbox: native box in the primary color */
.login-popup .popup-wrap .popup-content .login-form .agree_link {
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0.25rem 0 0.75rem;
	font-size: 0.875em;
	line-height: 1.5;
	color: var(--ds-ink-soft);
}

.login-popup .popup-wrap .popup-content .login-form .agree_link input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	top: 0;
	accent-color: var(--ds-primary);
}

.login-popup .popup-wrap .popup-content .login-form .agree_link .checkmark {
	display: none;
}

.login-popup .popup-wrap .popup-content .login-form .agree_link p {
	margin: 0;
}

.login-popup .popup-wrap .popup-content .login-form .agree_link a {
	color: var(--ds-primary);
	text-decoration: underline;
}

.login-popup .error-message {
	width: 100%;
	margin: 0.375rem 0 0;
	font-size: 0.875em;
	line-height: 1.4286;
	color: var(--ds-destructive);
}

/* Server errors come right after the field's .form-item: pull them up under it */
.login-popup .popup-wrap .popup-content .login-form > .error-message {
	margin: -0.375rem 0 0.75rem;
}

.login-popup .popup-wrap .popup-content .login-form .alert {
	width: 100%;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-primary-soft);
	font-size: 0.9375em;
	color: var(--ds-ink);
}

.login-popup .popup-wrap .popup-content .under-form {
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ds-border);
	font-size: 0.9375em;
	line-height: 1.5;
}

.login-popup .popup-wrap .popup-content .under-form span {
	margin: 0;
	color: var(--ds-ink-soft);
}

.login-popup .popup-wrap .popup-content .under-form a {
	font-weight: 600;
	color: var(--ds-primary);
}

@media screen and (max-width: 575px) {
	.login-popup .popup-wrap,
	.search-popup .popup-wrap,
	.event-popup .popup-wrap {
		padding: 1.5rem 1.25rem;
	}

	.login-popup .popup-wrap .popup-content .popup-content-inner p.h2,
	.login-popup .popup-wrap .popup-content .login-form p.h2,
	.search-popup .popup-wrap .popup-content > p.h2,
	.event-popup .popup-wrap .popup-content > p.h2 {
		font-size: 1.25em;
	}

	.search-popup .popup-wrap .popup-content .search-form {
		flex-direction: column;
	}

	.login-popup .popup-wrap .popup-content .login-form .form-item.half-item {
		width: 100%;
	}

	.search-popup .popup-wrap .popup-content .search-form .form-item button {
		width: 100%;
	}
}

/* ---------- Scroll to top ---------- */

/* White card button with a Lucide arrow, primary on hover */
.scroll-top-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	left: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border-radius: var(--ds-radius-full);
	background-image: none;
	background-color: var(--ds-card);
	box-shadow: 0 0 0 1px var(--ds-border), var(--ds-shadow-card-hover);
	transition: opacity var(--ds-transition), background-color var(--ds-transition), transform var(--ds-transition);
}

.scroll-top-btn::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: var(--ds-primary);
	-webkit-mask: url(../img/lucide/arrow-up.svg) center / contain no-repeat;
	mask: url(../img/lucide/arrow-up.svg) center / contain no-repeat;
	transition: background-color var(--ds-transition);
}

.scroll-top-btn:hover {
	background-color: var(--ds-primary);
	transform: translateY(-2px);
}

.scroll-top-btn:hover::before {
	background-color: var(--ds-primary-foreground);
}

@media screen and (max-width: 991px) {
	.scroll-top-btn {
		left: 16px;
		bottom: 16px;
		width: 40px;
		height: 40px;
	}

	.scroll-top-btn::before {
		width: 18px;
		height: 18px;
	}
}

/* ---------- Footer ---------- */

footer.site-footer {
	padding: 4rem 0;
	background-color: var(--ds-ink);
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--ds-font-sans);
	font-size: 1em;
	line-height: 1.625;
}

.site-footer__container {
	width: 100%;
	max-width: var(--ds-shell);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.site-footer a:hover {
	color: #fff;
}

.site-footer__top {
	display: grid;
	gap: 3rem;
}

.site-footer__logo {
	display: inline-flex;
}

.site-footer__logo img {
	display: block;
	width: auto;
	height: 48px;
}

.site-footer .site-footer__tagline {
	max-width: 24rem;
	margin-top: 1rem;
	font-size: 1em;
	color: rgba(255, 255, 255, 0.65);
}

.site-footer__cols {
	display: grid;
	gap: 2.5rem;
}

.site-footer .site-footer__title {
	font-family: var(--ds-font-display);
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: #fff;
}

.site-footer__menu,
.site-footer__socials {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu {
	display: grid;
	gap: 0.625rem;
	margin-top: 1rem;
}

.site-footer__menu a {
	font-size: 0.9375em;
}

.site-footer__middle {
	display: grid;
	gap: 2.5rem;
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__support-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-footer__support-label {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.site-footer__support-head img {
	display: block;
	width: auto;
	height: 36px;
}

.site-footer .site-footer__support-text {
	max-width: 28rem;
	margin-top: 1.25rem;
	font-size: 0.9375em;
}

.site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1.25rem;
}

.site-footer__socials a {
	font-size: 0.875em;
}

.site-footer__bottom {
	display: grid;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__bottom p {
	font-size: 0.875em;
	color: rgba(255, 255, 255, 0.5);
}

.site-footer__bottom a {
	color: rgba(255, 255, 255, 0.7);
	text-underline-offset: 4px;
}

.site-footer__bottom a:hover {
	text-decoration: underline;
}

@media (min-width: 640px) {
	.site-footer__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	footer.site-footer {
		padding: 5rem 0;
	}

	.site-footer__top {
		grid-template-columns: 1.2fr 2fr;
	}

	.site-footer__middle {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}

	.site-footer__socials {
		justify-content: flex-end;
	}
}

@media screen and (min-width: 992px) and (max-width: 1099px) {
	header.header .header-wrap .header-menu ul.menu li a {
		padding: calc(0.5rem + 1px) 0.25rem calc(0.5rem - 1px);
	}

	header.header .header-wrap a.logo,
	header.header .header-wrap a.logo img {
		height: 24px;
	}
}

/* ---------- Share modal (layouts/app.blade.php): same look as the login / search popups ---------- */

html.sh-lock {
	overflow: hidden;
}

.sh-modal {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgba(18, 32, 70, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-family: var(--ds-font-sans);
}

.sh-modal[hidden] {
	display: none;
}

.sh-modal__card {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: 2rem;
	border-radius: var(--ds-radius-xl);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

.sh-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-full);
	background-color: transparent;
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.sh-modal__close::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: var(--ds-ink-soft);
	-webkit-mask: url(../img/lucide/x.svg) center / contain no-repeat;
	mask: url(../img/lucide/x.svg) center / contain no-repeat;
}

.sh-modal__close:hover,
.sh-modal__close:focus-visible {
	outline: none;
	background-color: var(--ds-muted);
}

.sh-modal .sh-modal__title {
	margin: 0 0 1.25rem;
	padding-right: 2.5rem;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3333;
	color: var(--ds-ink);
}

.sh-modal__label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

/* Link field + copy button in one row */
.sh-modal__link {
	display: flex;
	gap: 0.5rem;
}

.sh-modal__url {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
	font-family: inherit;
	font-size: 0.9375em;
	color: var(--ds-ink);
	text-overflow: ellipsis;
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.sh-modal__url:focus {
	outline: none;
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.sh-modal__copy {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 48px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-family: inherit;
	font-size: 0.9375em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.sh-modal__copy::before {
	content: '';
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/copy.svg) center / contain no-repeat;
	mask: url(../img/lucide/copy.svg) center / contain no-repeat;
}

.sh-modal__copy:hover {
	background-color: var(--ds-primary-hover);
}

.sh-modal__copy:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* After copying: green state with a check for 2 s */
.sh-modal__copied-text,
.sh-modal__copy.is-copied .sh-modal__copy-text {
	display: none;
}

.sh-modal__copy.is-copied .sh-modal__copied-text {
	display: inline;
}

.sh-modal__copy.is-copied {
	background-color: #1d8a4a;
}

.sh-modal__copy.is-copied::before {
	-webkit-mask-image: url(../img/lucide/check.svg);
	mask-image: url(../img/lucide/check.svg);
}

/* Social buttons: outline, like "Continue with Google" in the login popup */
.sh-modal__socials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ds-border);
}

.sh-modal__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 48px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ds-ink);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.sh-modal__social::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--sh-icon) center / contain no-repeat;
	mask: var(--sh-icon) center / contain no-repeat;
}

.sh-modal__social--facebook {
	--sh-icon: url(../img/lucide/facebook.svg);
}

.sh-modal__social--x {
	--sh-icon: url(../img/lucide/x-logo.svg);
}

.sh-modal__social:hover,
.sh-modal__social:focus-visible {
	outline: none;
	border-color: var(--ds-ink-soft);
	background-color: var(--ds-muted);
	color: var(--ds-ink);
}

@media (max-width: 575px) {
	.sh-modal__card {
		padding: 1.5rem;
	}

	.sh-modal__link,
	.sh-modal__socials {
		grid-template-columns: minmax(0, 1fr);
	}

	.sh-modal__link {
		flex-direction: column;
	}
}