/*
 * The cookie banner (R14): the Cookie Notice plugin's own markup, drawn in the site's type and colours.
 *
 * The plugin prints #cookie-notice (fixed to the bottom, full width) with the words, the gold "Sutinku"
 * button, the "Privatumo politika" link and a close icon; its colours come from its settings (the site's
 * blue bar and gold pill, set by tools/configure-cookie-notice.php), and its shape and type are set here.
 * Selectors start at the plugin's id so they win over its stylesheet without !important; the one
 * !important is the second button's background, because the plugin writes that colour inline on both.
 *
 * Desktop: one row in the page's own content column, the words left, the two pills right, the close icon at
 * the column's end. At 781 px and below: the words, then the two pills side by side across the width. Fixed to
 * the bottom, so it never covers the header (search, menu); the page scrolls clear of it.
 */

#cookie-notice {
	font-family: var(--wp--preset--font-family--geist);
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 -6px 24px rgb(0 0 0 / 0.14);
}

#cookie-notice .cookie-notice-container {
	position: relative; /* the close icon sits in the content column, not at the window's edge */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	box-sizing: border-box;
	width: min(var(--mn-content, 1176px), 100% - 2 * var(--mn-gutter, 20px));
	margin: 0 auto;
	padding: 18px 44px 18px 0;
	text-align: left;
}

/* the plugin hides the container with display:none when it is not showing; flex must not undo that */
#cookie-notice.cookie-notice-hidden .cookie-notice-container {
	display: none;
}

#cookie-notice .cn-text-container {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	max-width: 760px;
	overflow-wrap: anywhere;
}

#cookie-notice .cn-buttons-container {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	align-items: center;
}

/* the pills: the site's button shape (consult.css: 47 px radius, Geist 500), at banner size */
#cookie-notice .cn-button:not(.cn-button-custom) {
	box-sizing: border-box;
	display: inline-flex; /* centres the label in the pill whether the control is a button or a link */
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0 28px;
	border-radius: 47px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-01);
}

#cookie-notice .cn-button:not(.cn-button-custom):focus-visible {
	outline: 2px solid var(--wp--preset--color--c-01);
	outline-offset: 3px;
}

/* the second pill is an outline: the plugin paints both with the gold, inline, hence !important */
#cookie-notice .cn-more-info.cn-button:not(.cn-button-custom) {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55);
}

#cookie-notice .cn-more-info.cn-button:not(.cn-button-custom):hover {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--c-01);
}

#cookie-notice .cn-close-icon {
	right: 0;
	opacity: 0.8;
}

#cookie-notice .cn-close-icon:before,
#cookie-notice .cn-close-icon:after {
	background-color: var(--wp--preset--color--c-01);
}

@media (max-width: 781px) {
	#cookie-notice {
		font-size: var(--wp--preset--font-size--s-02);
	}

	#cookie-notice .cookie-notice-container {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px 0 18px;
	}

	#cookie-notice .cn-text-container {
		max-width: none;
		padding-right: 28px; /* clear of the close icon */
	}

	#cookie-notice .cn-buttons-container {
		width: 100%;
	}

	#cookie-notice .cn-button:not(.cn-button-custom) {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 12px;
		font-size: var(--wp--preset--font-size--s-02);
	}

	#cookie-notice .cn-close-icon {
		top: 6px;
		margin: 0;
		right: -10px;
	}
}

/*
 * The Tawk.to chat bubble (R17). While it is on the page (body.mn-has-chat, set by theme/inc/live-scripts.php) it sits
 * fixed in the bottom right corner, 20 px from both edges and 64 x 60, above the banner. Live's own banner lets it cover
 * the close icon; here it must cover no button, so the banner keeps its buttons clear of that 84 px corner.
 * Between 782 and 1360 px the page's column ends within reach of the bubble (its close icon sits at the column's end, the
 * pills 44 px before it), so the whole banner takes 84 px of right padding; wider, the column already ends 8 px or more
 * before the bubble. At 781 px and below the two pills keep their own width, side by side while they fit and stacked
 * when they do not, in the width left of the bubble.
 */
@media (min-width: 782px) and (max-width: 1360px) {
	body.mn-has-chat #cookie-notice {
		padding-right: 84px;
	}
}

@media (max-width: 781px) {
	body.mn-has-chat #cookie-notice .cn-buttons-container {
		width: auto;
		max-width: calc(100% - 72px);
		flex-wrap: wrap;
	}

	body.mn-has-chat #cookie-notice .cn-button:not(.cn-button-custom) {
		flex: 0 1 auto;
		padding: 0 14px;
	}
}