/*
 * Samsar styling for Fluent Forms.
 *
 * Provides brand defaults for inputs and submit button. NO !important —
 * per-form Button Style settings in the Fluent Forms editor have higher
 * specificity (form.fluent_form_N .wpf_has_custom_css.ff-btn-submit) and
 * should be allowed to override these defaults.
 */

.fluentform .ff-el-input--input input[type="text"],
.fluentform .ff-el-input--input input[type="email"],
.fluentform .ff-el-input--input input[type="tel"],
.fluentform .ff-el-input--input textarea {
	border-radius: 65px;
	padding: 1.125em 1.5625em;
	font-family: var(--wp--preset--font-family--apk-galeria), sans-serif;
	font-size: 1rem;
	border: 1px solid var(--wp--preset--color--border-light, #dadee3);
	background: var(--wp--preset--color--base, #fff);
}

.fluentform .ff-el-input--input textarea {
	border-radius: 30px;
}

.fluentform .ff-btn-submit {
	border-radius: 65px;
	font-weight: 700;
	line-height: 1;
	padding: 1.125em 1.5625em;
	background: var(--wp--preset--color--primary, #3a72ff);
	color: var(--wp--preset--color--base, #fff);
	font-family: var(--wp--preset--font-family--apk-galeria), sans-serif;
	border: none;
	cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--primary-accent, #39c1ff);
}

.fluentform .ff-el-group {
	margin-bottom: 1rem;
}

/* Whitepaper Download Modal */
.samsar-whitepaper-modal {
	width: 644px;
	max-width: calc(100% - 2rem);
	border: none;
	border-radius: 30px;
	padding: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--primary, #3a72ff);
	background-image: url('../images/whitepaper-modal-gradient.png');
	background-size: cover;
	background-position: center;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--apk-galeria), sans-serif;
	box-shadow: 0 30px 80px rgba(12, 16, 26, 0.4);
}

.samsar-whitepaper-modal::backdrop {
	background: rgba(12, 16, 26, 0.6);
}

.samsar-whitepaper-modal__inner {
	position: relative;
	padding: 60px;
}

@media (max-width: 600px) {
	.samsar-whitepaper-modal__inner {
		padding: 2.5rem 1.5rem;
	}
}

.samsar-whitepaper-modal__title {
	margin: 0 0 14px;
	max-width: 502px;
	font-weight: 700;
	line-height: 1.1;
	font-size: clamp(2rem, 5vw, 2.8125rem);
	letter-spacing: -0.02em;
	color: #ffffff;
}

.samsar-whitepaper-modal__lede {
	margin: 0 0 30px;
	max-width: 502px;
	font-size: 1.125rem;
	line-height: 1.42;
	color: #ffffff;
}

.samsar-whitepaper-close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--main, #0c101a);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	z-index: 1;
	border-radius: 50%;
}

.samsar-whitepaper-close:hover {
	opacity: 0.7;
}

.samsar-whitepaper-close:focus {
	outline: none;
}

.samsar-whitepaper-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

.samsar-whitepaper-close svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Hide field labels — Figma uses placeholders only */
.samsar-whitepaper-modal .ff-el-input--label {
	display: none;
}

/* Inputs: white box, 5px radius (NOT the global pill style).
 * Shared between the Whitepaper modal and the CTA Newsletter form (id 3)
 * so both Fluent Forms surfaces use the same brand input style.
 */
.samsar-whitepaper-modal input[type="text"],
.samsar-whitepaper-modal input[type="email"],
.samsar-whitepaper-modal input[type="tel"],
.samsar-whitepaper-modal textarea,
.fluentform_wrapper_3 input[type="text"],
.fluentform_wrapper_3 input[type="email"],
.fluentform_wrapper_3 input[type="tel"],
.fluentform_wrapper_3 textarea {
	border-radius: 5px;
	padding: 0 22px;
	height: 55px;
	border: none;
	background: #ffffff;
	color: var(--wp--preset--color--main, #0c101a);
	font-family: var(--wp--preset--font-family--apk-galeria), sans-serif;
	font-size: 1rem;
	line-height: 1.32;
	box-shadow: none;
	width: 100%;
	box-sizing: border-box;
}

.samsar-whitepaper-modal textarea,
.fluentform_wrapper_3 textarea {
	border-radius: 5px;
	height: auto;
	padding: 18px 22px;
}

.samsar-whitepaper-modal input::placeholder,
.samsar-whitepaper-modal textarea::placeholder,
.fluentform_wrapper_3 input::placeholder,
.fluentform_wrapper_3 textarea::placeholder {
	color: #838e97;
	opacity: 1;
	font-weight: 500;
}

.samsar-whitepaper-modal .ff-el-group {
	margin-bottom: 10px;
}

/* Submit: dark pill, "Download White Paper".
 * Uses the dialog ID for high specificity — Fluent Forms injects an inline
 * <style> per form (form.fluent_form_N .ff-btn-submit ...) at 0,3,1 that
 * would otherwise win against class-only selectors.
 */
#samsar-whitepaper-modal .ff-btn-submit {
	margin-top: 10px;
	background: var(--wp--preset--color--main, #0c101a);
	color: #ffffff;
	border-radius: 65px;
	padding: 18px 25px;
	font-family: var(--wp--preset--font-family--apk-galeria), sans-serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.02;
	letter-spacing: -0.01em;
	border: none;
	cursor: pointer;
	width: auto;
}

#samsar-whitepaper-modal .ff-btn-submit:hover {
	background: var(--wp--preset--color--main, #0c101a);
	opacity: 0.9;
}

/* Hide the hidden message field's container if Fluent Forms renders it visibly */
.samsar-whitepaper-modal .ff-el-form-control[name="message"],
.samsar-whitepaper-modal .ff-el-input--input input[name="message"] {
	display: none;
}

/* Headroom Header */
.site-header.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transform: translateY(-100%); /* default fixed state: hidden */
	transition: transform 0.25s ease;
	will-change: transform;
}

.admin-bar .site-header.is-fixed {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header.is-fixed {
		top: 46px;
	}
}

.site-header.is-fixed.is-pinned {
	transform: translateY(0);
}

.site-header.is-fixed.is-unpinned {
	transform: translateY(-100%);
}