/* ==========================================================================
   OIB CTA Form — split card with heading + bullets (left) and form (right)
   ========================================================================== */

.oib-cta {
	--oib-cta-pt: 80px;
	--oib-cta-pb: 80px;

	position: relative;
	padding: var(--oib-cta-pt) 24px var(--oib-cta-pb);
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* ---- Container widths ---- */
.oib-cta__inner {
	margin: 0 auto;
}

.oib-cta__inner--narrow { max-width: 1080px; }
.oib-cta__inner--wide   { max-width: 1280px; }
.oib-cta__inner--full   { max-width: calc(100% - 32px); }

/* ==========================================================================
   Outer card
   ========================================================================== */

.oib-cta__card {
	--oib-cta-card-from: #dbeafe;
	--oib-cta-card-to:   #eaf2ff;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	padding: 56px;
	border-radius: 28px;
	background:
		linear-gradient(135deg, var(--oib-cta-card-from) 0%, var(--oib-cta-card-to) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		0 24px 48px -28px rgba(59, 130, 246, 0.18),
		0 8px 16px -12px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   Left: heading + bullets
   ========================================================================== */

.oib-cta__copy {
	min-width: 0;
}

.oib-cta__heading {
	margin: 0 0 18px;
	color: #0f172a;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.oib-cta__subtitle {
	margin: 0 0 32px;
	color: #475569;
	font-size: clamp(15px, 1.1vw, 16px);
	line-height: 1.6;
	max-width: 520px;
}

/* ---- Bullets ---- */
.oib-cta__bullets {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: 22px;
}

.oib-cta__bullet {
	display: flex;
	align-items: center;
	gap: 16px;
}

.oib-cta__bullet-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: #bfdbfe;
	color: #0c4a6e;
}

.oib-cta__bullet-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.oib-cta__bullet-text {
	color: #0f172a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

/* ==========================================================================
   Right: form card
   ========================================================================== */

.oib-cta__form {
	background: #ffffff;
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.06);

	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.oib-cta__form-row {
	display: grid;
	gap: 18px;
}

.oib-cta__form-row--2 {
	grid-template-columns: 1fr 1fr;
}

.oib-cta__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.oib-cta__label {
	color: #0f172a;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* Chained `.oib-cta__form .oib-cta__input` to win against theme/Elementor's
   global `input[type=text], ...` rule (specificity 0,1,1). Two classes give
   us 0,2,0 which always beats it. */
.oib-cta__form .oib-cta__input {
	width: 100%;
	padding: 13px 14px;
	background: #f1f5f9;
	border: none;
	border-radius: 10px;
	color: #0f172a;
	font-family: inherit;
	font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
	line-height: 1.4;
	outline: none;
	transition: background 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
			appearance: none;
	box-sizing: border-box;
}

.oib-cta__form .oib-cta__input::placeholder {
	color: #94a3b8;
	opacity: 1;
}

.oib-cta__form .oib-cta__input:hover {
	background: #e2e8f0;
}

.oib-cta__form .oib-cta__input:focus,
.oib-cta__form .oib-cta__input:focus-visible {
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.45);
}

.oib-cta__form .oib-cta__input:invalid:not(:placeholder-shown) {
	box-shadow: 0 0 0 3px rgba(253, 164, 175, 0.35);
}

/* ---- Select ---- */
.oib-cta__field--select {
	position: relative;
}

/* Chevron drawn as a separate ::after layer on the field wrapper — survives
   any theme/Elementor rule on the <select> element itself. The wrapper is the
   <label>, so we anchor the chevron to its bottom-right (where the select sits). */
.oib-cta__field--select::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 19px;
	width: 14px;
	height: 14px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	pointer-events: none;
	transition: transform 0.2s ease;
}

.oib-cta__form .oib-cta__select {
	padding-right: 40px;
	cursor: pointer;
}

/* Belt-and-suspenders: explicitly hide native UA arrows in case theme
   re-enables them. */
.oib-cta__form .oib-cta__select::-ms-expand { display: none; }
.oib-cta__form .oib-cta__select {
	-webkit-appearance: none;
	-moz-appearance: none;
			appearance: none;
}

/* Subtle chevron flip when the select is focused (open) */
.oib-cta__field--select:focus-within::after {
	transform: rotate(180deg);
}

/* ---- Textarea ---- */
.oib-cta__form .oib-cta__textarea {
	resize: vertical;
	min-height: 110px;
	padding: 12px 14px;
	line-height: 1.55;
}

/* ---- Submit ---- */
.oib-cta__submit {
	--oib-cta-btn-from: #917388;
	--oib-cta-btn-to:   #7E5D74;

	margin-top: 4px;
	padding: 14px 18px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--oib-cta-btn-from) 0%, var(--oib-cta-btn-to) 100%);
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.005em;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 10px 24px -12px rgba(126, 93, 116, 0.55);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.oib-cta__submit:hover,
.oib-cta__submit:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 14px 28px -12px rgba(126, 93, 116, 0.7);
	outline: none;
}

.oib-cta__submit:active {
	transform: translateY(0);
}

.oib-cta__submit[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

/* ---- Disclaimer ---- */
.oib-cta__disclaimer {
	margin: 4px 0 0;
	color: #94a3b8;
	font-size: 12.5px;
	text-align: center;
	line-height: 1.5;
}

/* ---- Success message ---- */
.oib-cta__success {
	margin-top: 10px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
	font-size: 14.5px;
	line-height: 1.55;
}

.oib-cta__success[hidden] {
	display: none;
}

/* When success is shown, fade the form fields */
.oib-cta__form.oib-cta__form--submitted .oib-cta__form-row,
.oib-cta__form.oib-cta__form--submitted .oib-cta__field,
.oib-cta__form.oib-cta__form--submitted .oib-cta__submit,
.oib-cta__form.oib-cta__form--submitted .oib-cta__disclaimer {
	display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — single column, form below copy */
@media (max-width: 980px) {
	.oib-cta__card {
		grid-template-columns: 1fr !important;
		gap: 36px;
		padding: 40px;
	}

	.oib-cta__heading {
		margin-bottom: 14px;
	}

	.oib-cta__subtitle {
		margin-bottom: 24px;
		max-width: none;
	}
}

/* Phone — tighter, stack form rows */
@media (max-width: 600px) {
	.oib-cta {
		padding: clamp(48px, 10vw, 72px) 16px clamp(48px, 10vw, 72px);
	}

	.oib-cta__card {
		padding: 28px 20px;
		border-radius: 22px;
		gap: 28px;
	}

	.oib-cta__heading {
		font-size: clamp(22px, 6vw, 28px);
	}

	.oib-cta__subtitle {
		font-size: 14.5px;
	}

	.oib-cta__bullets {
		gap: 14px;
	}

	.oib-cta__form {
		padding: 22px 18px;
		gap: 14px;
	}

	.oib-cta__form-row--2 {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.oib-cta__input {
		font-size: 16px;            /* prevents iOS zoom-on-focus */
		padding: 12px 14px;
	}

	.oib-cta__submit {
		padding: 13px 16px;
	}
}

/* ==========================================================================
   A11y / motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.oib-cta__input,
	.oib-cta__submit { transition: none !important; }
	.oib-cta__submit:hover { transform: none; }
}