.kbnav-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 27, 61, 0.55);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.kbnav-popup-overlay.is-open {
	display: flex;
}

.kbnav-popup-overlay * {
	box-sizing: border-box;
}

.kbnav-popup-box {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 520px;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(15, 27, 61, 0.25);
	padding: 20px;
	animation: kbnav-popup-in 0.18s ease-out;

	/* Scrollable, but the scrollbar itself stays invisible (Firefox) */
	scrollbar-width: none;
}

/* Scrollable, but the scrollbar itself stays invisible (Chrome/Edge/Safari) */
.kbnav-popup-box::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

@keyframes kbnav-popup-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Reset the close button hard — themes love slapping a default red/pink
   validation-style border on every <button>, so every property that could
   carry that through is pinned explicitly. */
.kbnav-popup-close {
	all: unset !important;
	position: absolute !important;
	top: 14px !important;
	right: 16px !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 22px !important;
	line-height: 1 !important;
	color: #5b6478 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.kbnav-popup-close:hover,
.kbnav-popup-close:focus-visible {
	background: #f0f1f5 !important;
	color: #0f1b3d !important;
}

.kbnav-popup-title {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 700;
	color: #0f1b3d;
	padding-right: 30px;
}

/* ---- Form fields: reset theme defaults, then apply our own look ---- */

.kbnav-popup-body .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 14px;
}

.kbnav-popup-body input[type="text"],
.kbnav-popup-body input[type="email"],
.kbnav-popup-body input[type="tel"],
.kbnav-popup-body select,
.kbnav-popup-body textarea {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d7dbe6;
	border-radius: 7px;
	font-size: 14px;
	color: #0f1b3d;
	background: #fff;
	font-family: inherit;
}

.kbnav-popup-body input[type="text"]:focus,
.kbnav-popup-body input[type="email"]:focus,
.kbnav-popup-body input[type="tel"]:focus{
    border-color: transparent !important;
}

.kbnav-popup-body textarea:focus-visible, .kbnav-popup-body select:focus-visible{
    outline: 0px solid #000 !important;
    outline-offset: 0px !important;
}


.kbnav-popup-body select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235b6478' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}

.kbnav-popup-body textarea {
	min-height: 90px;
	height:90px;
	resize: vertical;
}

.kbnav-popup-body input:focus,
.kbnav-popup-body select:focus,
.kbnav-popup-body textarea:focus {
	border-color: #1e5fd4;
	box-shadow: 0 0 0 3px rgba(30, 95, 212, 0.12);
}

.kbnav-popup-body input[readonly] {
	background: #f4f5f8;
	color: #5b6478;
}

/* Radio groups (Salutation, Business Type, etc.) */
.kbnav-popup-body .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.kbnav-popup-body .wpcf7-list-item {
	margin: 0;
}

.kbnav-popup-body .wpcf7-list-item-label {
	font-size: 14px;
	color: #0f1b3d;
	margin-left: 6px;
}

.kbnav-popup-body input[type="radio"] {
	accent-color: #1e5fd4;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* We use `placeholder` instead of visible <label> text — keep a tiny bit
   of top spacing so fields don't feel cramped without labels. */
.kbnav-popup-body p {
	margin: 0 0 4px;
}

.kbnav-popup-body ::placeholder {
	color: #8a91a8;
	opacity: 1;
}

.kbnav-popup-body .wpcf7-submit {
	all: unset;
	box-sizing: border-box;
	display: inline-block;
	background: #1e5fd4;
	color: #fff;
	padding: 11px 28px;
	border-radius: 7px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin-top: 6px;
}

.kbnav-popup-body .wpcf7-submit:hover {
	background: #0f1b3d;
}

.kbnav-popup-body .wpcf7-not-valid-tip {
	/* CF7 renders this span for every required field up front, and marks it
	   hidden via aria-hidden="true" until that specific field actually
	   fails validation (aria-hidden becomes "false"). Only show it then —
	   not unconditionally, or every field shows an error before Submit is
	   even clicked. */
	display: none;
}

.kbnav-popup-body .wpcf7-not-valid-tip:not([aria-hidden="true"]) {
	display: block;
	color: #d4351c;
	font-size: 12px;
	margin-top: 4px;
	margin-bottom: 10px;
}

/* CF7 can leave more than one error tip sitting in the same field wrap
   (e.g. a field re-validated more than once). Only the first one for a
   given field should ever be shown — any extra sibling stays hidden so
   the message never prints twice under one field. */
.kbnav-popup-body .wpcf7-not-valid-tip:not([aria-hidden="true"]) ~ .wpcf7-not-valid-tip {
	display: none !important;
}

.kbnav-popup-body .wpcf7-response-output {
	border-radius: 7px;
	font-size: 13px;
	margin: 16px 0 0;
	padding: 10px 14px;
}

body.kbnav-popup-locked {
	overflow: hidden;
}