/**
 * Lead Source Survey - modal styling.
 *
 * Scoped under .lss- prefixes and kept specific enough to survive most themes
 * without resorting to !important.
 */

/*
 * Positioning is declared !important throughout. Themes frequently ship broad rules for
 * fixed-position and flex containers that would otherwise win on specificity and drag the
 * modal back to a screen edge. Layout is the one thing here that must not be overridable.
 */
.lss-overlay {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	/* Above chat widgets and cookie bars, which commonly sit in the 999999 range. */
	z-index: 2147483000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 20px;
	background: rgba( 22, 20, 18, 0.55 );
	backdrop-filter: blur( 3px );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lss-overlay.lss-visible {
	opacity: 1;
}

.lss-box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 28px 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.22 );
	font-family: inherit;
	text-align: center;
	transform: translateY( 12px ) scale( 0.98 );
	transition: transform 0.22s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

.lss-visible .lss-box {
	transform: translateY( 0 ) scale( 1 );
}

.lss-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9a9490;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.lss-close:hover {
	background: #f3f0ed;
	color: #56504c;
}

.lss-heading {
	margin: 0 0 6px;
	color: #1d1a17;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.lss-question {
	margin: 0 0 20px;
	color: #6b6560;
	font-size: 15px;
	line-height: 1.5;
}

.lss-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.lss-option {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #e6e1dc;
	border-radius: 10px;
	background: #fdfcfb;
	color: #2b2724;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.lss-option:hover {
	border-color: var( --lss-accent, #b08d57 );
	background: #fff;
}

.lss-option:active {
	transform: scale( 0.985 );
}

.lss-option:focus-visible {
	outline: 2px solid var( --lss-accent, #b08d57 );
	outline-offset: 2px;
}

.lss-send {
	border-color: var( --lss-accent, #b08d57 );
	background: var( --lss-accent, #b08d57 );
	color: #fff;
	font-weight: 600;
}

.lss-send:hover {
	background: var( --lss-accent, #b08d57 );
	filter: brightness( 1.06 );
}

.lss-input {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 8px;
	padding: 13px 14px;
	border: 1px solid #e6e1dc;
	border-radius: 10px;
	background: #fff;
	color: #2b2724;
	font-family: inherit;
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-size: 16px;
}

.lss-input:focus {
	border-color: var( --lss-accent, #b08d57 );
	outline: none;
}

.lss-skip {
	padding: 6px 10px;
	border: 0;
	background: transparent;
	color: #9a9490;
	font-family: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.lss-skip:hover {
	color: #6b6560;
}

.lss-thankyou {
	margin: 0;
	padding: 18px 4px;
	color: #1d1a17;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

@media ( max-width: 480px ) {
	/*
	 * Centred. Chat bubbles and cookie bars own the bottom edge, so the card is capped at
	 * 60% height and JS hides those widgets while it is open - that keeps the middle clear
	 * without the modal having to hug an edge.
	 */
	.lss-overlay {
		align-items: center !important;
		justify-content: center !important;
		padding: 40px 26px !important;
	}

	.lss-box {
		max-width: 340px;
		/*
		 * 78% leaves the page visible behind while still fitting a long heading plus every
		 * answer. At 60% a multi-line heading pushed the first option out of view.
		 * vh first for older iOS, dvh where supported.
		 */
		max-height: 78vh;
		max-height: 78dvh;
		margin: 0 !important;
		padding: 20px 16px 14px;
		border-radius: 16px !important;
		transform: translateY( 12px ) scale( 0.98 );
	}

	.lss-visible .lss-box {
		transform: translateY( 0 ) scale( 1 );
	}

	.lss-close {
		top: 6px;
		right: 8px;
		width: 28px;
		height: 28px;
		font-size: 22px;
	}

	/*
	 * Headings here are often a full sentence rather than a short thank-you, so the type is
	 * smaller and the leading tighter than on desktop. Every line saved is an answer that
	 * stays visible without scrolling.
	 */
	.lss-heading {
		margin-bottom: 6px;
		font-size: 15px;
		line-height: 1.3;
	}

	.lss-question {
		margin-bottom: 14px;
		font-size: 13px;
	}

	.lss-option {
		padding: 9px 12px;
		border-radius: 8px;
		font-size: 13px;
	}

	/*
	 * With the card capped at 60% height, scrolling is confined to the answer list so the
	 * question and the skip link stay put instead of scrolling out of reach.
	 */
	.lss-box {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.lss-options {
		flex: 1 1 auto;
		gap: 5px;
		margin-bottom: 10px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/*
		 * Fades the top and bottom edges of the scroll area so a clipped first or last
		 * answer reads as "there is more here" instead of looking like the list starts
		 * at the second option.
		 */
		-webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 14px, #000 calc( 100% - 14px ), transparent 100% );
		mask-image: linear-gradient( to bottom, transparent 0, #000 14px, #000 calc( 100% - 14px ), transparent 100% );
	}

	/* No fade when everything fits - the mask would dim the real first and last rows. */
	.lss-options.lss-no-scroll {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.lss-heading,
	.lss-question,
	.lss-skip {
		flex: 0 0 auto;
	}

	.lss-skip {
		font-size: 12px;
	}
}

/* Short screens: allow a taller card so every answer still fits without scrolling. */
@media ( max-width: 480px ) and ( max-height: 700px ) {
	.lss-overlay {
		padding: 24px 26px !important;
	}

	.lss-box {
		max-height: 72vh;
		max-height: 72dvh;
		padding: 16px 14px 12px;
	}

	.lss-question {
		margin-bottom: 10px;
	}

	.lss-option {
		padding: 8px 12px;
	}

	.lss-options {
		gap: 4px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lss-overlay,
	.lss-box {
		transition: none;
	}
}

/*
 * While the survey is open, hide floating widgets that would otherwise sit on top of it.
 * Chat bubbles and cookie bars set very high z-index values of their own, so raising ours
 * is not always enough. The class is removed as soon as the modal closes, so the widgets
 * come straight back.
 */
body.lss-modal-open [class*="chat-widget"],
body.lss-modal-open [id*="chat-widget"],
body.lss-modal-open [class*="livechat"],
body.lss-modal-open [id*="livechat"],
body.lss-modal-open [class*="LiveChat"],
body.lss-modal-open [id*="LiveChat"],
body.lss-modal-open [class*="chat-bubble"],
body.lss-modal-open [data-lss-hide],
body.lss-modal-open #chat-widget-container,
body.lss-modal-open #livechat-compact-container,
body.lss-modal-open #tidio-chat,
body.lss-modal-open #smartsupp-widget-container,
body.lss-modal-open .crisp-client,
body.lss-modal-open #hubspot-messages-iframe-container,
body.lss-modal-open .fb_dialog,
body.lss-modal-open #fb-root .fb_dialog,
body.lss-modal-open #cookie-law-info-bar,
body.lss-modal-open .cky-consent-container,
body.lss-modal-open #CybotCookiebotDialog,
body.lss-modal-open .cmplz-cookiebanner,
body.lss-modal-open #moove_gdpr_cookie_info_bar,
body.lss-modal-open .widget-visible iframe {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Stops the page behind the modal from scrolling on iOS. */
body.lss-modal-open {
	overflow: hidden;
}