/* Service Post - custom, isolated classes prefixed with spost- */

.spost-hero {
	padding: 48px 20px;
}
.spost-hero__container {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr; /* media | content */
	gap: 32px;
	align-items: center;
}
.spost-hero__media {
	width: 100%;
}
.spost-hero__media img {
	max-height: 500px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.spost-hero__video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.spost-hero__title {
	font-size: clamp(22px, 3.5vw, 36px);
	margin: 0 0 12px;
}
.spost-hero__desc {
	font-size: clamp(14px, 2.2vw, 16px);
	line-height: 1.9;
	margin: 0;
}

/* Masked form */
.spost-form {
	padding: 24px 20px 56px;
}
.spost-form__container {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr; /* aside | mask */
	gap: 20px;
	align-items: center;
}
.spost-form__aside {
	display: grid;
	gap: 10px;
}
.spost-form__title {
	margin: 0;
	font-size: clamp(18px, 2.8vw, 24px);
	font-weight: 700;
}
.spost-form__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}
.spost-form__bullets {
	margin: 6px 0 0;
	padding: 0 18px 0 0; /* RTL bullets */
	display: grid;
	gap: 6px;
}
.spost-form__bullets li {
	list-style: disc;
	font-size: 14px;
	transform: translateY(10px);
}
/* Staggered float-in when list becomes visible */
.spost-form__bullets.is-visible li {
	animation: spost-bullet-in 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.spost-form__bullets.is-visible li:nth-child(1) {
	animation-delay: 0ms;
}
.spost-form__bullets.is-visible li:nth-child(2) {
	animation-delay: 180ms;
}
.spost-form__bullets.is-visible li:nth-child(3) {
	animation-delay: 360ms;
}
.spost-form__bullets.is-visible li:nth-child(4) {
	animation-delay: 540ms;
}
.spost-form__bullets.is-visible li:nth-child(5) {
	animation-delay: 720ms;
}

@keyframes spost-bullet-in {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.spost-form__mask {
	background-image: url("../media/images/Frame.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	border-radius: 24px;
	position: relative;
	min-height: 300px;
	background-color: transparent;
	width: 100%;
	overflow: visible;
}

/* Fallback - ensure background is loaded */
.spost-form__mask:not([style*="background-image"]) {
	background-image: url("../media/images/Frame.png") !important;
}

html.dark .spost-form__mask {
	background-image: url("../media/images/Framedark.png");
}
html.dark .spost-form__mask:not([style*="background-image"]) {
	background-image: url("../media/images/Framedark.png") !important;
}
/* Mobile - up to 450px */
@media (max-width: 450px) {
	.spost-form__mask {
		background-image: url("../media/images/framemobile.svg");
		background-position: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		min-height: 280px;
		padding: 25px 15px;
	}
	html.dark .spost-form__mask {
		background-image: url("../media/images/framemobiledark.svg");
	}
}
/* Small tablets and mobile landscape - 451px to 725px */
@media (min-width: 451px) and (max-width: 725px) {
	.spost-form__mask {
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		min-height: 320px;
		padding: 28px 18px;
	}
}
/* Medium screens - 726px to 998px */
@media (min-width: 726px) and (max-width: 998px) {
	.spost-form__mask {
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		min-height: 350px;
		padding: 35px 25px;
	}
}
/* Large screens - 999px and above */
@media (min-width: 999px) {
	.spost-form__mask {
		background-image: url("../media/images/Frame.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		min-height: 400px;
		padding: 40px 30px;
	}
	html.dark .spost-form__mask {
		background-image: url("../media/images/Framedark.png");
	}
}

/* Ensure mask adapts to form content */
.spost-form__mask .cform-wrapper {
	min-height: auto;
	position: relative;
	z-index: 1;
	background: transparent;
}

/* Ensure form elements don't block background */
.spost-form__mask .cform-step {
	position: relative;
	z-index: 2;
	background: transparent;
}

/* Ensure all form elements have transparent backgrounds */
.spost-form__mask .cform-step-question,
.spost-form__mask .cform-step-fields,
.spost-form__mask .cform-fields-wrapper,
.spost-form__mask .cform-question-wrapper {
	background: transparent;
}

.spost-form__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.spost-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.spost-form__row--full {
	grid-template-columns: 1fr auto;
	align-items: end;
}
.spost-field {
	display: grid;
	gap: 6px;
}
.spost-field--full {
	grid-column: 1 / -1;
}
.spost-field__label {
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 2px;
	color: #111;
}
.spost-input,
.spost-textarea {
	width: 100%;
	padding: 0.8rem;
	border: none;
	border-bottom: 1px solid #ccc;
	background: transparent;
	color: black;
	font-size: 0.95rem;
	border-radius: 0;
	transition: border-color 0.2s;
	outline: none;
	box-shadow: none;
	margin-bottom: 8px;
}
.spost-input::placeholder,
.spost-textarea::placeholder {
	color: #bbbbbb;
	opacity: 1;
}
.spost-input:focus,
.spost-textarea:focus {
	border-color: #9a47ff;
}
.spost-field__error,
.composer-error {
	display: none;
	font-size: 0.8rem;
	color: #d93025;
	margin-top: 6px;
}
.spost-field__error[aria-hidden="false"],
.composer-error[aria-hidden="false"] {
	display: block;
}
html.dark .spost-input,
html.dark .spost-textarea {
	background: none;
	border-color: #ffffff78;
	color: #000 !important;
}
html.dark .spost-input::placeholder,
html.dark .spost-textarea::placeholder {
	color: rgb(0, 0, 0);
	opacity: 1;
}
.spost-submit {
	padding: 12px 18px;
	border-radius: 12px;
	white-space: nowrap;
}

/* Benefits section */
.spost-benefits {
	padding: 48px 20px 72px;
}
.spost-benefits__container {
	margin: 0 auto;
}
.spost-benefits__title {
	text-align: center;
	margin: 0 0 28px;
	font-size: clamp(20px, 3.2vw, 30px);
}
.spost-benefits__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
	margin-bottom: 24px;
}
.spost-benefits__text p {
	margin: 0;
	line-height: 1.9;
	font-size: 15px;
}
.spost-benefits__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Reused whyus list, space it nicely here */
.spost-whyus-list {
	margin-top: 8px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.spost-whyus-list li {
	list-style: none;
	border-radius: 14px;
	padding: 12px 14px;
	background: var(--list-bg, rgba(255, 255, 255, 0.6));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	gap: 10px;
}
html.dark .spost-whyus-list li {
	background: rgba(20, 20, 20, 0.55);
}
.spost-whyus-list .whyus__bullet {
	flex: 0 0 auto;
}

/* Width fix: benefits CTA cluster */
.spost-benefits .scroll-cta {
	width: auto;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 35px;
}
.spost-benefits .scroll-cta .cta-btn.button__txt {
	width: auto;
	max-width: 100%;
	white-space: nowrap;
}
.spost-benefits .scroll-cta .round-btn .icon {
	display: block;
	width: 28px;
	height: 28px;
}

/* Width fix: form submit button */
.spost-form__row--full .button-custom-contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	justify-self: start;
}
/* Responsive */
@media (max-width: 1024px) {
	.spost-hero__container {
		grid-template-columns: 1fr;
	}
	.spost-benefits__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.spost-form__container {
		grid-template-columns: 1fr;
	}
	.spost-form__row {
		grid-template-columns: 1fr;
	}
	.spost-form__row--full {
		grid-template-columns: 1fr;
	}
	.spost-whyus-list {
		grid-template-columns: 1fr;
	}
}

/* Dark mode - ensure ALL form texts are white (labels, spans, inputs, placeholders) */
html.dark .spost-form__mask label,
html.dark .spost-form__mask label span,
html.dark .spost-form__mask .spost-field__label,
html.dark .spost-form__mask .spost-input,
html.dark .spost-form__mask .spost-textarea {
	color: #fff !important;
	caret-color: #fff;
}
html.dark .spost-form__mask .spost-input::placeholder,
html.dark .spost-form__mask .spost-textarea::placeholder {
	color: #fff !important;
	opacity: 0.75;
}
/* ==============================
   SPOST FAQ CTA SECTION
   ============================== */
.spost-faq-cta {
	padding: 48px 16px;
	background-color: #00000014;
	background-image: url("../media/shape/3d\ perspective\ bg.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: 20px 0px;
	border-top-left-radius: 80px;
	border-top-right-radius: 80px;

	position: relative;
}
@media (min-width: 768px) {
	.spost-faq-cta,
	.spost-faq-cta__image {
		overflow: hidden;
	}
}
.spost-faq-cta__container {
	max-width: var(--container-w, 1200px);
	margin: 0 auto;
	padding: 0 var(--side-pad, 20px);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 40px;
	align-items: center;
	position: relative;
	min-height: 400px;
}
.spost-faq-cta__left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-end;
	justify-content: center;
}
.spost-faq-cta__right {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.spost-faq-cta__image {
	width: 100%;
	max-width: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100%;
	min-height: 400px;
	margin: 0 auto;
}
.spost-faq-cta__img {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
	object-fit: contain;

	position: relative;
	will-change: transform;
	transition: transform 0.1s ease-out;
}
.spost-faq-cta__title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	text-align: right;
}
.spost-faq-cta__desc {
	font-size: clamp(16px, 2.5vw, 18px);
	line-height: 1.6;
	margin: 0;
	max-width: 100%;
}
.spost-faq-cta__scroll {
	/* width: 350px; */
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: nowrap;
}
.spost-faq-cta__scroll .cta-btn.button__txt {
	width: auto;
	white-space: nowrap;
	flex-shrink: 0;
}
.spost-faq-cta__scroll .round-btn .icon {
	display: block;
	width: 28px;
	height: 28px;
}
/* Responsive Design */
@media (max-width: 768px) {
	.spost-faq-cta__container {
		grid-template-columns: 1fr;
		gap: 40px;
		min-height: auto;
	}
	.spost-faq-cta__image {
		order: -1;
		min-height: 300px;
	}
	.spost-faq-cta__img {
		max-width: 300px;
	}
	.spost-faq-cta__left {
		text-align: center;
		align-items: center;
	}
	.spost-faq-cta__right {
		justify-content: center;
	}
	.spost-faq-cta__title {
		text-align: center;
	}
	.spost-faq-cta__desc {
		max-width: none;
		text-align: center;
	}
	.spost-faq-cta__scroll {
		justify-content: center;
	}
}
.spost-faq-cta__scroll {
	margin-inline-start: unset;
}
/* Dark mode support */
html.dark .spost-faq-cta {
	background-color: #0000006e;
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
html.dark .spost-faq-cta__title {
	color: var(--text, #f6f7ff);
}
html.dark .spost-faq-cta__desc {
	color: var(--text, #9aa0b5);
}
.spost-faq .features-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2vw, 20px);
	padding: clamp(20px, 5vw, 56px) 20px;
}
/* .pm-step.pmstepfix.is-visible {
    display: none;
} */

/* ==============================
   CONDITIONAL FORM STYLES (cform-*)
   Exclusive classes for conditional form flow
   ============================== */

.cform-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Override spost-form__form styles when cform-wrapper is present */
.spost-form__form.cform-wrapper {
	gap: 20px;
}

.cform-step {
	width: 100%;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cform-step-question {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}

.cform-question-wrapper {
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.cform-question-title {
	font-size: clamp(18px, 2.5vw, 22px);
	font-weight: 600;
	margin: 0;
	color: #111;
}

html.dark .cform-question-title {
	color: #fff;
}

.cform-options {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.cform-option-btn {
	padding: 12px 32px;
	border: 2px solid #9a47ff;
	background: transparent;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	color: #9a47ff;
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 120px;
}

.cform-option-btn:hover {
	background: #9a47ff;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(154, 71, 255, 0.3);
}

.cform-option-btn:active {
	transform: translateY(0);
}

html.dark .cform-option-btn {
	border-color: #9a47ff;
	color: #9a47ff;
}

html.dark .cform-option-btn:hover {
	background: #9a47ff;
	color: #fff;
}

.cform-step-fields {
	width: 100%;
}

.cform-fields-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.cform-field-group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cform-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.cform-label-text {
	font-size: 0.95rem;
	font-weight: 500;
	color: #111;
	margin-bottom: 2px;
}

html.dark .cform-label-text {
	color: #fff;
}

.cform-input {
	width: 100%;
	padding: 0.8rem;
	border: none;
	border-bottom: 1px solid #ccc;
	background: transparent;
	color: #111;
	font-size: 0.95rem;
	border-radius: 0;
	transition: border-color 0.2s;
	outline: none;
	box-shadow: none;
}

.cform-input::placeholder {
	color: #bbbbbb;
	opacity: 1;
}

.cform-input:focus {
	border-color: #9a47ff;
}

html.dark .cform-input {
	border-color: #ffffff78;
	color: #fff !important;
	caret-color: #fff;
}

html.dark .cform-input::placeholder {
	color: rgba(255, 255, 255, 0.75);
	opacity: 1;
}

.cform-return-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 8px;
}

.cform-return-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	color: #6b6b6b;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.cform-return-btn:hover {
	background: #f5f5f5;
	border-color: #9a47ff;
	color: #9a47ff;
	transform: translateX(2px);
}

.cform-return-btn:active {
	transform: translateX(0);
}

html.dark .cform-return-btn {
	color: #9aa0b5;
	border-color: #3a3a3a;
}

html.dark .cform-return-btn:hover {
	background: rgba(154, 71, 255, 0.1);
	border-color: #9a47ff;
	color: #9a47ff;
}

.cform-return-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease;
}

.cform-return-btn:hover .cform-return-icon {
	transform: translateX(2px);
}

.cform-submit-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-top: 8px;
}

.cform-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: #9a47ff;
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.cform-submit-btn:hover {
	background: #7e3dd9;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(154, 71, 255, 0.4);
}

.cform-submit-btn:active {
	transform: translateY(0);
}

.cform-submit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

/* Responsive adjustments for conditional form */
@media (max-width: 720px) {
	.cform-step-question {
		min-height: 180px;
	}

	.cform-question-title {
		font-size: 18px;
	}

	.cform-option-btn {
		padding: 10px 24px;
		font-size: 15px;
		min-width: 100px;
	}

	.cform-fields-wrapper {
		gap: 16px;
	}

	.cform-return-wrapper {
		justify-content: center;
	}

	.cform-return-btn {
		width: 100%;
		justify-content: center;
	}

	.cform-submit-wrapper {
		justify-content: center;
	}

	.cform-submit-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Animation for step transitions */
.cform-step.hide {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}

.cform-step.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}
.spost-faq .features-list li:nth-child(25) {
	grid-column: unset;
}
/*bug fixes*/
.spost-content,
.spost-faq,
.comments-section {
	padding: 24px 20px 56px;
}
/*bug fixes*/