.ybt-jobapp-form-wrap {
	--ybt-navy: #16233F;
	--ybt-gold: #F0A339;
	--ybt-cream: #F7F4EE;
	max-width: 760px;
	margin: 0 auto;
	font-family: inherit;
}

.ybt-jobapp-form fieldset.ybt-jobapp-fieldset {
	border: 1px solid #e3e0d8;
	border-radius: 10px;
	padding: 20px 22px;
	margin-bottom: 20px;
	background: #fff;
}

.ybt-jobapp-fieldset legend {
	font-weight: 600;
	font-size: 1.05em;
	color: var(--ybt-navy);
	padding: 0 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ybt-jobapp-fieldset .req { color: #c0392b; }

.ybt-jobapp-counter {
	font-size: 0.8em;
	font-weight: 500;
	background: var(--ybt-cream);
	color: var(--ybt-navy);
	padding: 2px 10px;
	border-radius: 999px;
}

.ybt-jobapp-form select,
.ybt-jobapp-form input[type="text"],
.ybt-jobapp-form input[type="email"],
.ybt-jobapp-form input[type="tel"],
.ybt-jobapp-form input[type="number"],
.ybt-jobapp-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d8d4c8;
	border-radius: 8px;
	font-size: 1em;
	box-sizing: border-box;
	margin-top: 4px;
}

.ybt-jobapp-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

@media (max-width: 600px) {
	.ybt-jobapp-grid-2 { grid-template-columns: 1fr; }
}

.ybt-jobapp-grid-2 label { font-weight: 500; font-size: 0.92em; }

.ybt-jobapp-skill-category {
	border: 1px solid #ece8dc;
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 8px 14px;
}

.ybt-jobapp-skill-category summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ybt-navy);
	padding: 6px 0;
}

.ybt-jobapp-skill-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 6px 14px;
	padding: 8px 0 10px;
}

.ybt-jobapp-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92em;
	cursor: pointer;
}

.ybt-jobapp-checkbox input:disabled + * { opacity: .5; }

.ybt-jobapp-custom-skill-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.ybt-jobapp-custom-skill-row input { flex: 1; }

.ybt-jobapp-btn-remove {
	background: #f4e4e0;
	border: none;
	border-radius: 6px;
	width: 36px;
	cursor: pointer;
	font-size: 1.1em;
	color: #c0392b;
}

.ybt-jobapp-btn-secondary {
	background: var(--ybt-cream);
	border: 1px dashed var(--ybt-gold);
	color: var(--ybt-navy);
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}

.ybt-jobapp-btn-primary {
	background: var(--ybt-navy);
	color: #fff;
	border: none;
	padding: 14px 28px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.05em;
	cursor: pointer;
	width: 100%;
}

.ybt-jobapp-btn-primary:hover { background: #0f1830; }
.ybt-jobapp-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.ybt-jobapp-field-error {
	color: #c0392b;
	font-size: 0.85em;
	display: block;
	margin-top: 4px;
}

.ybt-jobapp-alert {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #a02c22;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.ybt-jobapp-sending {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #eaf1fb;
	border: 1px solid #bcd3f2;
	color: #16233F;
	font-weight: 500;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
}

/* The `display: flex` above unconditionally beats the browser's default
   "[hidden] { display: none }" UA rule (author CSS always wins a tie with
   the UA stylesheet), which is what made this banner show up immediately
   on page load even though it had the `hidden` attribute. This restores
   hidden actually hiding it. */
.ybt-jobapp-sending[hidden] {
	display: none;
}

.ybt-jobapp-spinner {
	width: 18px;
	height: 18px;
	border: 3px solid rgba(22,35,63,.2);
	border-top-color: #16233F;
	border-radius: 50%;
	flex: 0 0 auto;
	animation: ybt-jobapp-spin .7s linear infinite;
}

@keyframes ybt-jobapp-spin {
	to { transform: rotate(360deg); }
}

.ybt-jobapp-honeypot { position: absolute; left: -9999px; top: -9999px; }

.ybt-jobapp-success {
	background: #eef8f0;
	border: 1px solid #bfe3c6;
	border-radius: 10px;
	padding: 30px;
	text-align: center;
}

.ybt-jobapp-success h3 { color: #1e6b3a; margin-top: 0; }

/* Tom Select brand touch */
.ts-wrapper.single .ts-control { border-radius: 8px !important; padding: 10px 12px !important; }
.ts-wrapper.focus .ts-control { border-color: var(--ybt-gold) !important; box-shadow: 0 0 0 2px rgba(240,163,57,.25) !important; }

/* Dropdown is appended to <body> (dropdownParent: 'body') so it always
   floats above sibling fieldsets AND above the popup modal overlay.
   IMPORTANT: Tom Select's bundled bootstrap5 theme styles the dropdown's
   background/border/spacing via ".ts-wrapper .ts-dropdown" (a descendant
   selector). Moving the dropdown to <body> takes it OUT of .ts-wrapper,
   so those rules stop matching and the dropdown loses its background —
   letting the page content underneath show/bleed through. These rules
   restyle ".ts-dropdown" as a fully self-contained component so it looks
   right no matter where in the DOM it actually lives. */
.ts-dropdown {
	position: absolute;
	z-index: 999995 !important;
	background: #fff !important;
	opacity: 1 !important;
	border: 1px solid #d8d4c8 !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
	overflow: hidden;
}

.ts-dropdown .ts-dropdown-content {
	background: #fff !important;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px 0;
}

.ts-dropdown .ts-dropdown-content .optgroup-header {
	background: #f7f4ee !important;
	color: #16233F;
	font-weight: 700;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 8px 14px 4px;
}

.ts-dropdown .ts-dropdown-content [data-selectable],
.ts-dropdown .ts-dropdown-content .option {
	background: #fff !important;
	padding: 9px 14px;
	cursor: pointer;
}

.ts-dropdown .ts-dropdown-content [data-selectable].active,
.ts-dropdown .ts-dropdown-content .option.active {
	background: #f0a339 !important;
	color: #16233F !important;
}

.ts-dropdown .no-results {
	background: #fff !important;
	padding: 10px 14px;
	color: #888;
}

/* ---- Live skill search ---- */
.ybt-jobapp-skill-search { margin-bottom: 10px; }

.ybt-jobapp-skill-search-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #d8d4c8;
	border-radius: 8px;
	font-size: 0.95em;
	background: #fbfaf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.098ZM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 15px;
}

.ybt-jobapp-counter-num.is-full { color: #a02c22; font-weight: 700; }

.ybt-jobapp-checkbox[hidden] { display: none; }

/* ---- Popup modal (namespaced "ybt-jobapp-" end to end so it can never
   clash with any other on-site popup, e.g. a WhatsApp chat widget) ---- */
.ybt-jobapp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 20, 35, 0.6);
	z-index: 999990;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease;
	overflow-y: auto;
}

.ybt-jobapp-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.ybt-jobapp-modal {
	background: #fff;
	border-radius: 14px;
	max-width: 820px;
	width: 100%;
	position: relative;
	padding: 34px 26px 26px;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
	transform: translateY(-12px);
	transition: transform .18s ease;
}

.ybt-jobapp-modal-overlay.is-open .ybt-jobapp-modal {
	transform: translateY(0);
}

.ybt-jobapp-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: var(--ybt-cream, #F7F4EE);
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	color: var(--ybt-navy, #16233F);
}

.ybt-jobapp-modal-loading {
	text-align: center;
	padding: 60px 0;
	color: #888;
}

body.ybt-jobapp-modal-open {
	overflow: hidden;
}

.ybt-jobapp-trigger-link {
	display: inline-block;
}