/* Rijschool Oude Maas – Footer v3 (kortingskaart + contactstrip + kolommen + onderbalk) */

.rom-ft {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	color: var(--rom-ft-text, #ffffff);
	padding: 0 var(--rom-ft-pad-x, 24px) 28px;
	overflow: visible;
}

/* De roze achtergrond begint pas onder de "overlap"-ruimte; daarboven schijnt de pagina door. */
.rom-ft__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, var(--rom-ft-bg-1, #eb0d6d) 0%, var(--rom-ft-bg-2, #c40a5a) 70%, var(--rom-ft-bg-3, #8f0640) 100%);
	pointer-events: none;
}

.rom-ft--has-cta .rom-ft__bg {
	top: var(--rom-ft-overlap, 220px);
}

.rom-ft__bg--glow::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 40%),
		radial-gradient(circle at 100% 100%, rgba(0, 161, 225, .25) 0%, rgba(0, 161, 225, 0) 45%);
}

.rom-ft__inner {
	position: relative;
	z-index: 1;
	max-width: var(--rom-ft-max, 1200px);
	margin: 0 auto;
	padding-top: 60px;
}

.rom-ft--has-cta .rom-ft__inner {
	padding-top: 70px;
}

/* ---------- Kortingskaart ---------- */
.rom-ft__cta {
	position: relative;
	z-index: 2;
	max-width: var(--rom-ft-max, 1200px);
	margin: 0 auto;
	background: var(--rom-ft-cta-bg, #ffffff);
	color: #0a2540;
	border-radius: 28px;
	padding: 44px 48px 40px;
	box-shadow: 0 40px 90px rgba(80, 4, 36, .35);
}

.rom-ft__sticker {
	position: absolute;
	top: -26px;
	right: 28px;
	background: linear-gradient(135deg, var(--rom-ft-sticker-from, #eb0d6d) 0%, var(--rom-ft-sticker-to, #c40a5a) 100%);
	color: var(--rom-ft-sticker-text, #ffffff);
	padding: 14px 20px;
	border-radius: 14px;
	transform: rotate(6deg);
	box-shadow: 0 16px 36px rgba(235, 13, 109, .4);
	text-align: center;
	font-family: 'Poppins', sans-serif;
	z-index: 3;
}

.rom-ft__sticker-van { font-size: 12px; font-weight: 600; opacity: .85; text-decoration: line-through; }
.rom-ft__sticker-voor { font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.rom-ft__sticker-per { font-size: 10.5px; font-weight: 600; margin-top: 3px; opacity: .85; }

.rom-ft__cta-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 44px;
	align-items: center;
}

.rom-ft__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rom-ft-kicker-bg, #fff0f6);
	color: var(--rom-ft-kicker-text, #eb0d6d);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 50px;
	margin-bottom: 16px;
}

.rom-ft__kicker::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.rom-ft__cta-title {
	margin: 0 0 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 3.6vw, 48px);
	letter-spacing: -.03em;
	line-height: 1.05;
	color: var(--rom-ft-cta-title, #0a2540);
}

.rom-ft__cta-text {
	margin: 0 0 22px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--rom-ft-cta-text, #5a6b7a);
	max-width: 460px;
}

.rom-ft__usps {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rom-ft__usps li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--rom-ft-usp-text, #0a2540);
}

.rom-ft__usp-ico {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--rom-ft-usp-ico-bg, #fff0f6);
	color: var(--rom-ft-usp-ico, #eb0d6d);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rom-ft__usp-ico svg { width: 18px; height: 18px; display: block; }

.rom-ft__ossy {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rom-ft-cta-text, #5a6b7a);
}

.rom-ft__ossy-photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #0a2540;
	border: 3px solid #ffffff;
	box-shadow: 0 4px 14px rgba(10, 37, 64, .15);
	flex-shrink: 0;
	overflow: hidden;
	display: block;
}

.rom-ft__ossy-photo img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.rom-ft__ossy b {
	display: block;
	color: var(--rom-ft-ossy-name, #0a2540);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 14px;
}

/* Formulierpaneel */
.rom-ft__panel {
	background: var(--rom-ft-panel-bg, #f4f7fa);
	border-radius: 22px;
	padding: 26px 26px 22px;
	position: relative;
}

.rom-ft__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.rom-ft__panel-title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.02em;
	color: var(--rom-ft-panel-title, #0a2540);
}

.rom-ft__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--rom-ft-badge-text, #0b68a0);
	background: var(--rom-ft-badge-bg, #e6f5fc);
	border-radius: 50px;
	padding: 6px 11px;
	white-space: nowrap;
}

.rom-ft__badge svg { width: 13px; height: 13px; }

.rom-ft__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.rom-ft__field { position: relative; }
.rom-ft__field--full { grid-column: span 2; }

.rom-ft__field label {
	position: absolute;
	left: 16px;
	top: 9px;
	font-size: 11px;
	font-weight: 700;
	color: var(--rom-ft-input-label, #0b68a0);
	pointer-events: none;
	margin: 0;
}

.rom-ft__field input {
	width: 100%;
	background: var(--rom-ft-input-bg, #ffffff);
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 24px 40px 10px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--rom-ft-input-text, #0a2540);
	outline: none;
	box-shadow: 0 2px 8px rgba(10, 37, 64, .04);
	transition: border-color .2s, box-shadow .2s;
}

.rom-ft__field input::placeholder { color: #9aa8b5; font-weight: 500; }
.rom-ft__field input:focus { border-color: var(--rom-ft-input-focus, #00a1e1); box-shadow: 0 0 0 4px rgba(0, 161, 225, .15); }
.rom-ft__field input.is-error { border-color: var(--rom-ft-input-err, #eb0d6d); }

.rom-ft__vink {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rom-ft-input-focus, #00a1e1);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s cubic-bezier(.5, 1.6, .5, 1);
	pointer-events: none;
}

.rom-ft__vink svg { width: 11px; height: 11px; }
.rom-ft__field.is-ok .rom-ft__vink { transform: translateY(-50%) scale(1); }

.rom-ft__hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.rom-ft__btn {
	width: 100%;
	margin-top: 12px;
	border: none;
	cursor: pointer;
	border-radius: 14px;
	padding: 18px 22px;
	background: linear-gradient(135deg, var(--rom-ft-btn-from, #eb0d6d) 0%, var(--rom-ft-btn-to, #c40a5a) 100%);
	color: var(--rom-ft-btn-text, #ffffff);
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 12px 28px rgba(235, 13, 109, .35);
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s;
}

.rom-ft__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(235, 13, 109, .45);
	background: linear-gradient(135deg, var(--rom-ft-btn-from, #eb0d6d) 0%, var(--rom-ft-btn-to, #c40a5a) 100%);
	color: var(--rom-ft-btn-text, #ffffff);
}

.rom-ft__btn:focus-visible { outline: 3px solid var(--rom-ft-input-focus, #00a1e1); outline-offset: 3px; }
.rom-ft__btn[disabled] { opacity: .6; cursor: default; transform: none; }
.rom-ft__btn svg { width: 17px; height: 17px; transition: transform .2s ease; }
.rom-ft__btn:hover svg { transform: translateX(4px); }

.rom-ft__note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--rom-ft-note, #5a6b7a);
	margin-top: 12px;
	min-height: 18px;
}

.rom-ft__stars { color: #ffc43d; letter-spacing: 1.5px; font-size: 12px; margin-right: 4px; }
.rom-ft__note.is-error { color: var(--rom-ft-input-err, #eb0d6d); }

.rom-ft__success { text-align: center; padding: 30px 10px; }
.rom-ft__success[hidden] { display: none; }

.rom-ft__success-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--rom-ft-succ-circle, #00a1e1);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	animation: rom-ft-pop .5s cubic-bezier(.5, 1.6, .5, 1);
}

@keyframes rom-ft-pop { from { transform: scale(0); } }

.rom-ft__success-circle svg { width: 30px; height: 30px; }
.rom-ft__success h3 { margin: 0 0 6px; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -.03em; color: var(--rom-ft-panel-title, #0a2540); }
.rom-ft__success p { margin: 0; font-size: 14px; font-weight: 500; color: var(--rom-ft-note, #5a6b7a); line-height: 1.6; }

/* ---------- Contactstrip ---------- */
.rom-ft__strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 60px;
}

.rom-ft__tile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 18px;
	background: var(--rom-ft-tile-bg, rgba(255, 255, 255, .1));
	border: 1px solid var(--rom-ft-tile-border, rgba(255, 255, 255, .18));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	text-decoration: none !important;
	color: var(--rom-ft-text, #ffffff) !important;
	transition: background .2s ease, transform .2s ease;
}

.rom-ft__tile:hover { background: var(--rom-ft-tile-bg-hover, rgba(255, 255, 255, .18)); transform: translateY(-3px); }

.rom-ft__tile-ico {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--rom-ft-tile-circle, #ffffff);
	color: var(--rom-ft-tile-ico, #eb0d6d);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rom-ft__tile-ico svg { width: 20px; height: 20px; display: block; }
.rom-ft__tile-text { min-width: 0; }
.rom-ft__tile b { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15.5px; line-height: 1.2; }
.rom-ft__tile-text > span { display: block; font-size: 12.5px; font-weight: 500; opacity: .85; margin-top: 2px; }

/* ---------- Kolommen ---------- */
.rom-ft__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 40px;
	padding-bottom: 44px;
}

.rom-ft__cols--3 { grid-template-columns: 1.4fr 1fr 1fr; }

.rom-ft__logo {
	display: inline-flex;
	flex-direction: column;
	line-height: .95;
	text-decoration: none !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	letter-spacing: -.035em;
	color: var(--rom-ft-text, #ffffff) !important;
	margin-bottom: 16px;
}

.rom-ft__logo small { font-size: 18px; font-weight: 700; }
.rom-ft__logo span { font-size: 40px; }
.rom-ft__logo img { display: block; height: auto; max-width: 100%; }

.rom-ft__brand-text { margin: 0 0 22px; font-size: 14.5px; font-weight: 500; line-height: 1.7; opacity: .9; max-width: 320px; }

.rom-ft__socials { display: flex; gap: 10px; }

.rom-ft__socials a {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--rom-ft-social-bg, #ffffff);
	color: var(--rom-ft-social-ico, #eb0d6d);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}

.rom-ft__socials a:hover { transform: translateY(-3px); }
.rom-ft__socials svg { width: 20px; height: 20px; display: block; }

.rom-ft__h4 {
	margin: 0 0 18px;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -.02em;
	color: var(--rom-ft-text, #ffffff);
}

.rom-ft__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.rom-ft__list a {
	text-decoration: none !important;
	color: var(--rom-ft-text, #ffffff) !important;
	font-size: 15px;
	font-weight: 500;
	opacity: .9;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: opacity .2s ease;
}

.rom-ft__list a::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
	transition: opacity .2s ease, transform .2s ease;
}

.rom-ft__list a:hover { opacity: 1; }
.rom-ft__list a:hover::before { opacity: 1; transform: scale(1.4); }

.rom-ft__vragen .rom-ft__h4 { margin-bottom: 8px; }
.rom-ft__vragen .rom-ft__h4 span { display: block; font-size: 16px; font-weight: 700; opacity: .9; letter-spacing: 0; margin-bottom: 4px; }
.rom-ft__vragen p { margin: 0 0 18px; font-size: 14px; font-weight: 500; line-height: 1.65; opacity: .9; }

.rom-ft__bel {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--rom-ft-bel-bg, #ffffff);
	color: var(--rom-ft-bel-text, #eb0d6d) !important;
	text-decoration: none !important;
	border-radius: 50px;
	padding: 8px 22px 8px 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 16px;
	transition: transform .2s ease;
}

.rom-ft__bel:hover { transform: translateY(-2px); }

.rom-ft__bel i {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rom-ft-bel-circle, #eb0d6d);
	color: var(--rom-ft-bel-ico, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-style: normal;
}

.rom-ft__bel i svg { width: 17px; height: 17px; display: block; }
.rom-ft__bel small { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px; color: var(--rom-ft-bel-sub, #5a6b7a); }

/* ---------- Onderbalk ---------- */
.rom-ft__bottom {
	border-top: 1px solid var(--rom-ft-line, rgba(255, 255, 255, .2));
	padding-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12.5px;
	font-weight: 500;
	opacity: .85;
}

.rom-ft__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.rom-ft__bottom a { color: var(--rom-ft-text, #ffffff) !important; text-decoration: none; }
.rom-ft__bottom a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.rom-ft__btn, .rom-ft__tile, .rom-ft__socials a, .rom-ft__vink, .rom-ft__bel { transition: none; }
	.rom-ft__success-circle { animation: none; }
}

@media (max-width: 1100px) {
	.rom-ft__cta-grid { grid-template-columns: 1fr; gap: 26px; }
	.rom-ft__strip { grid-template-columns: 1fr 1fr; }
	.rom-ft__cols, .rom-ft__cols--3 { grid-template-columns: 1fr 1fr; gap: 36px 30px; }
	.rom-ft__brand { grid-column: span 2; }
}

@media (max-width: 720px) {
	/* Compacte mobiele versie (naar footer-oude-maas-v5.html) */
	.rom-ft { padding-bottom: 20px; }
	.rom-ft--has-cta .rom-ft__inner { padding-top: 22px; }

	/* Proefleskaart compact */
	.rom-ft__cta { padding: 24px 16px 18px; border-radius: 20px; }
	.rom-ft__sticker { top: -16px; right: 10px; padding: 8px 12px; transform: rotate(4deg); border-radius: 10px; }
	.rom-ft__sticker-van { font-size: 10px; }
	.rom-ft__sticker-voor { font-size: 17px; }
	.rom-ft__sticker-per { font-size: 9.5px; margin-top: 2px; }
	.rom-ft__cta-grid { gap: 16px; }
	.rom-ft__kicker { font-size: 11.5px; padding: 6px 11px; margin-bottom: 10px; }
	.rom-ft__cta-title { font-size: 26px; margin-bottom: 10px; }
	.rom-ft__cta-text { display: none; }
	.rom-ft__usps { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
	.rom-ft__usps li { font-size: 11.5px; gap: 6px; background: var(--rom-ft-panel-bg, #f4f7fa); border-radius: 50px; padding: 6px 10px 6px 6px; }
	.rom-ft__usp-ico { width: 24px; height: 24px; border-radius: 50%; background: #ffffff; }
	.rom-ft__usp-ico svg { width: 13px; height: 13px; }
	.rom-ft__ossy { display: none; }

	.rom-ft__panel { padding: 16px 14px 14px; border-radius: 16px; }
	.rom-ft__panel-head { margin-bottom: 10px; }
	.rom-ft__panel-title { font-size: 16px; }
	.rom-ft__badge { font-size: 10.5px; padding: 5px 9px; }
	.rom-ft__fields { grid-template-columns: 1fr 1fr; gap: 8px; }
	.rom-ft__field label { left: 13px; top: 7px; font-size: 10px; }
	.rom-ft__field input { padding: 21px 34px 8px 13px; font-size: 14px; border-radius: 12px; }
	.rom-ft__btn { margin-top: 8px; padding: 15px 18px; font-size: 15px; border-radius: 12px; }
	.rom-ft__note { margin-top: 8px; font-size: 11px; }

	/* Contactstrip compact */
	.rom-ft__strip { grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 28px; }
	.rom-ft__tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 14px; }
	.rom-ft__tile-ico { width: 36px; height: 36px; }
	.rom-ft__tile-ico svg { width: 16px; height: 16px; }
	.rom-ft__tile b { font-size: 13.5px; }
	.rom-ft__tile-text > span { font-size: 11px; }

	/* Kolommen compact */
	.rom-ft__cols, .rom-ft__cols--3 { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding-bottom: 22px; }
	.rom-ft__brand { grid-column: span 2; }
	.rom-ft__logo { margin-bottom: 10px; }
	.rom-ft__logo small { font-size: 15px; }
	.rom-ft__logo span { font-size: 32px; }
	.rom-ft__brand-text { font-size: 13px; margin-bottom: 14px; max-width: none; }
	.rom-ft__socials a { width: 40px; height: 40px; border-radius: 12px; }
	.rom-ft__h4 { font-size: 17px; margin-bottom: 10px; }
	.rom-ft__list { gap: 7px; }
	.rom-ft__list a { font-size: 13.5px; }
	.rom-ft__vragen { grid-column: span 2; }
	.rom-ft__vragen .rom-ft__h4 span { font-size: 13px; }
	.rom-ft__vragen p { display: none; }
	.rom-ft__bel { font-size: 15px; }

	.rom-ft__bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; font-size: 11.5px; }
}