/*
 * Opportunities form — the shared component rendered by i1_opp_render_form().
 *
 * Two skins, one structure:
 *   .i1o--car   the consumer site: white card, 14px radius, red chips, Inter.
 *   .i1o--idp   the development site: hairlines, square corners, mono labels.
 *   .i1o--dark  either skin on a dark section (IDP's sections are dark).
 *
 * Everything is scoped under .i1o and controls are written at (0,4,1) or
 * above (.i1o .i1o-form .i1o-field input:not([type="radio"])). The consumer
 * site loads the Elementor kit, Elementor Pro form styles and the parent
 * theme's reset, which style inputs and buttons at up to (0,3,1); a bare
 * component rule loses to them silently.
 *
 * Panel visibility works without JavaScript through :has(); once the script
 * runs (.is-js), it owns visibility through the hidden attribute instead.
 */

.i1o {
	--o-ink: #0F1012;
	--o-text: #2A2D33;
	--o-muted: #5C6068;          /* 6.3:1 on white */
	--o-red: #C8102E;            /* the pillar logo's red, 5.9:1 on white */
	--o-red-deep: #9C0C23;
	--o-red-soft: #FBE9EC;
	--o-bg: #FFFFFF;
	--o-soft: #F5F5F6;
	--o-line: #E3E5E8;
	--o-field: #868C95;          /* control boundary, 3.4:1 on white (WCAG 1.4.11) */
	--o-ok: #1D6B3A;
	--o-r: 12px;
	--o-r-sm: 10px;
	--o-font: "i1-inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--o-label-font: 600 14px/1.35 var(--o-font);
	--o-legend-font: 700 13px/1.2 var(--o-font);
	--o-legend-track: .08em;
	--o-focus: 0 0 0 3px rgba(200, 16, 46, .28);

	font-family: var(--o-font);
	color: var(--o-text);
	position: relative;
}
.i1o *, .i1o *::before, .i1o *::after { box-sizing: border-box; }
.i1o [hidden] { display: none !important; }
.i1o .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.i1o .i1o-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.i1o .i1o-form { display: grid; gap: 28px; margin: 0; }
.i1o .i1o-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---------- Legends and step numbers ---------- */
.i1o .i1o-legend {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 0 0 14px; margin: 0 0 18px;
	border-bottom: 1px solid var(--o-line);
	font: var(--o-legend-font); letter-spacing: var(--o-legend-track); text-transform: uppercase; color: var(--o-ink);
}
.i1o .i1o-step {
	flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: var(--o-ink); color: #fff; font: 700 12px/1 var(--o-font); letter-spacing: 0;
}

/* ---------- Type picker ---------- */
.i1o .i1o-types__grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .i1o .i1o-types__grid { grid-template-columns: repeat(3, 1fr); } }
.i1o .i1o-type { position: relative; display: block; margin: 0; cursor: pointer; }
.i1o .i1o-type input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.i1o .i1o-type__box {
	display: flex; align-items: center; gap: 14px; height: 100%; min-height: 76px;
	padding: 16px 18px; border: 1.5px solid var(--o-line); border-radius: var(--o-r);
	background: var(--o-bg); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 720px) {
	.i1o .i1o-type__box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
}
.i1o .i1o-type:hover .i1o-type__box { border-color: var(--o-field); }
.i1o .i1o-type input:checked + .i1o-type__box { border-color: var(--o-red); background: var(--o-red-soft); box-shadow: inset 0 0 0 1px var(--o-red); }
/* Focus is an OUTLINE, not a shadow: a keyboard user arrowing through the
   options focuses the checked one, and the checked style's shadow would
   otherwise hide the focus indicator entirely. */
.i1o .i1o-type input:focus-visible + .i1o-type__box { outline: 3px solid var(--o-ink); outline-offset: 3px; }
.i1o .i1o-icon { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--o-red-soft); color: var(--o-red); }
.i1o .i1o-type input:checked + .i1o-type__box .i1o-icon { background: var(--o-red); color: #fff; }
.i1o .i1o-type__title { font: 700 15.5px/1.3 var(--o-font); color: var(--o-ink); }
.i1o .i1o-types.is-invalid .i1o-type__box { border-color: var(--o-red); }

/* ---------- Panels ---------- */
/* No JavaScript: show the chosen panel, and everything after a choice. */
.i1o:not(.is-js):not(.i1o--single) .i1o-panel[data-panel] { display: none; }
.i1o:not(.is-js) .i1o-form:has(input[name="opp_type"][value="property"]:checked) .i1o-panel[data-panel="property"],
.i1o:not(.is-js) .i1o-form:has(input[name="opp_type"][value="business"]:checked) .i1o-panel[data-panel="business"],
.i1o:not(.is-js) .i1o-form:has(input[name="opp_type"][value="startup"]:checked) .i1o-panel[data-panel="startup"] { display: block; }

.i1o .i1o-note { margin: -4px 0 18px; padding: 12px 14px; border-radius: var(--o-r-sm); background: var(--o-soft); font-size: 14.5px; line-height: 1.5; color: var(--o-text); }
.i1o .i1o-grid { display: grid; gap: 18px 16px; }
@media (min-width: 620px) {
	.i1o .i1o-grid { grid-template-columns: 1fr 1fr; }
	.i1o .i1o-field--wide { grid-column: 1 / -1; }
}

/* ---------- Fields ---------- */
.i1o .i1o-field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.i1o .i1o-label { display: block; margin: 0; padding: 0; font: var(--o-label-font); color: var(--o-ink); }
.i1o .i1o-req { color: var(--o-red); font-weight: 700; }
.i1o .i1o-opt { margin-left: 4px; font: 500 12.5px/1 var(--o-font); color: var(--o-muted); }
.i1o .i1o-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--o-muted); }

.i1o .i1o-form .i1o-field input:not([type="radio"]),
.i1o .i1o-form .i1o-field select,
.i1o .i1o-form .i1o-field textarea {
	display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 14px;
	border: 1.5px solid var(--o-field); border-radius: var(--o-r-sm); background: var(--o-bg); box-shadow: none;
	font: 400 16px/1.4 var(--o-font); color: var(--o-ink); letter-spacing: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none; appearance: none;
}
.i1o .i1o-form .i1o-field textarea { min-height: 116px; resize: vertical; }
.i1o .i1o-form .i1o-field select {
	padding-right: 40px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.i1o .i1o-form .i1o-field input::placeholder,
.i1o .i1o-form .i1o-field textarea::placeholder { color: #80858D; opacity: 1; }
.i1o .i1o-form .i1o-field input:not([type="radio"]):focus,
.i1o .i1o-form .i1o-field select:focus,
.i1o .i1o-form .i1o-field textarea:focus { outline: none; border-color: var(--o-red); box-shadow: var(--o-focus); }

/* Radio choices as toggles. */
.i1o .i1o-choices__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.i1o .i1o-choice { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.i1o .i1o-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.i1o .i1o-choice span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
	border: 1.5px solid var(--o-field); border-radius: 999px; background: var(--o-bg);
	font: 500 14.5px/1.25 var(--o-font); color: var(--o-ink);
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.i1o .i1o-choice:hover span { border-color: var(--o-ink); }
.i1o .i1o-choice input:focus-visible + span { outline: 3px solid var(--o-ink); outline-offset: 2px; }
.i1o .i1o-choice input:checked + span { background: var(--o-ink); border-color: var(--o-ink); color: #fff; }
.i1o .i1o-field[data-field="interest"] .i1o-choices__row { display: grid; gap: 8px; }
.i1o .i1o-field[data-field="interest"] .i1o-choice span { width: 100%; border-radius: var(--o-r-sm); padding: 12px 16px; }

/* Errors. */
.i1o .i1o-err { margin: 0; font: 600 13.5px/1.4 var(--o-font); color: var(--o-red); }
.i1o .i1o-field.is-invalid input:not([type="radio"]),
.i1o .i1o-field.is-invalid select,
.i1o .i1o-field.is-invalid textarea,
.i1o .i1o-field.is-invalid .i1o-choice span { border-color: var(--o-red); }
.i1o .i1o-alert {
	padding: 14px 16px; border-radius: var(--o-r-sm); border-left: 4px solid var(--o-red);
	background: var(--o-red-soft); font: 600 15px/1.45 var(--o-font); color: var(--o-ink);
}
.i1o .i1o-alert:focus { outline: 2px solid var(--o-red); outline-offset: 2px; }

/* Franchise hand-off note: shown only while "franchise" is the chosen interest. */
.i1o .i1o-franchise { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--o-r-sm); background: var(--o-soft); border-left: 4px solid var(--o-ink); }
.i1o .i1o-form:has(input[name="f[startup][interest]"][value="franchise"]:checked) .i1o-franchise { display: block; }
.i1o .i1o-franchise p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ---------- Submit ---------- */
.i1o .i1o-foot { display: grid; gap: 14px; }
.i1o .i1o-form .i1o-submit {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; min-height: 56px; margin: 0; padding: 0 28px;
	border: 0; border-radius: 14px; background: var(--o-red); color: #fff; box-shadow: 0 10px 24px -14px rgba(200, 16, 46, .9);
	font: 700 15px/1 var(--o-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
@media (min-width: 620px) { .i1o .i1o-form .i1o-submit { width: auto; justify-self: start; } }
.i1o .i1o-form .i1o-submit:hover,
.i1o .i1o-form .i1o-submit:focus { background: var(--o-red-deep); color: #fff; }
.i1o .i1o-form .i1o-submit:focus-visible { outline: 3px solid var(--o-ink); outline-offset: 3px; }
.i1o .i1o-form .i1o-submit:active { transform: translateY(1px); }
.i1o .i1o-form .i1o-submit[disabled] { cursor: progress; opacity: .85; }
.i1o .i1o-submit__busy { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: i1o-spin .8s linear infinite; }
.i1o .i1o-submit[aria-busy="true"] .i1o-submit__busy { display: inline-block; }
@keyframes i1o-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .i1o .i1o-submit__busy { animation-duration: 2.4s; } }

.i1o .i1o-privacy { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--o-muted); }
.i1o .i1o-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.i1o .i1o-privacy .i1o-req { font-weight: 700; }

.i1o .i1o-unavailable { margin: 0; padding: 18px; border-radius: var(--o-r-sm); background: var(--o-soft); font-size: 15px; }
.i1o-adminnote { margin: 10px 0 0; font: 12px/1.4 ui-monospace, Menlo, monospace; color: #8a0c22; }

/* ---------- Confirmation ---------- */
.i1o .i1o-done { padding: clamp(22px, 3vw, 32px); border-radius: var(--o-r); background: var(--o-bg); border: 1.5px solid var(--o-line); }
.i1o .i1o-done:focus { outline: none; }
.i1o .i1o-done:focus-visible { outline: 3px solid var(--o-red); outline-offset: 3px; }
.i1o .i1o-done__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 12px/1 var(--o-font); letter-spacing: .12em; text-transform: uppercase; color: var(--o-ok); }
.i1o .i1o-done__eyebrow::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--o-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.7 11 12 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.i1o .i1o-done__title { margin: 0 0 12px; font: 700 clamp(1.25rem, 1rem + 1vw, 1.6rem)/1.2 var(--o-font); letter-spacing: -.01em; text-transform: none; color: var(--o-ink); }
.i1o .i1o-done__body { display: none; }
.i1o .i1o-done__body p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; max-width: 60ch; }
.i1o .i1o-done[data-type="property"] [data-for="property"],
.i1o .i1o-done[data-type="business"] [data-for="business"],
.i1o .i1o-done[data-type="startup"][data-franchise="0"] [data-for="startup"],
.i1o .i1o-done[data-franchise="1"] [data-for="franchise"] { display: block; }
.i1o .i1o-done[data-type=""] [data-for="startup"] { display: block; }
.i1o .i1o-done__body--franchise { padding: 16px; margin: 4px 0 14px; border-radius: var(--o-r-sm); background: var(--o-soft); }
.i1o .i1o-done__body--franchise p:last-child { margin-bottom: 0; }
.i1o .i1o-done .i1o-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px;
	background: var(--o-ink); color: #fff; font: 700 14px/1 var(--o-font); letter-spacing: .04em; text-decoration: none;
}
.i1o .i1o-done .i1o-btn:hover, .i1o .i1o-done .i1o-btn:focus { background: var(--o-red); color: #fff; }
.i1o .i1o-done__next { margin: 4px 0 14px; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--o-muted); }
.i1o .i1o-done__again { margin: 0; }
.i1o .i1o-done__again a { font: 600 14.5px/1.3 var(--o-font); color: var(--o-ink); text-decoration: underline; text-decoration-color: var(--o-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* =========================================================================
   DEVELOPMENT SKIN — follows idp.css: hairlines, near-square corners, mono
   metadata, red as an accent only. Its forms sit on dark sections.
   ========================================================================= */
.i1o--idp {
	--o-font: var(--idp-sans, "Inter", system-ui, sans-serif);
	--o-r: 2px;
	--o-r-sm: 2px;
	--o-label-font: 500 13px/1.3 var(--o-font);
	--o-legend-font: 500 11px/1.2 var(--idp-mono, ui-monospace, monospace);
	--o-legend-track: .16em;
	--o-red: #C8102E;
	--o-red-deep: #A60D26;
}
.i1o--idp .i1o-step { border-radius: 0; width: auto; height: auto; padding: 0; background: none; color: var(--o-red); font: inherit; }
.i1o--idp .i1o-icon { border-radius: 0; background: none; padding: 4px; }
.i1o--idp .i1o-form .i1o-submit { border-radius: 2px; box-shadow: none; text-transform: none; letter-spacing: .01em; font: 500 15px/1 var(--o-font); min-height: 52px; }
.i1o--idp .i1o-choice span { border-radius: 2px; }
.i1o--idp .i1o-type input:checked + .i1o-type__box .i1o-icon { background: none; color: var(--o-red); }
.i1o--idp .i1o-done .i1o-btn { border-radius: 2px; }
.i1o--idp .i1o-done__eyebrow { font-family: var(--idp-mono, ui-monospace, monospace); font-weight: 500; letter-spacing: .16em; }

/* Dark ground (IDP homepage #submit and the IDP opportunities form section). */
.i1o--dark {
	--o-ink: #FFFFFF;
	--o-text: rgba(255, 255, 255, .86);
	--o-muted: #9AA1A7;              /* --idp-steel-lt, 7:1 on #121416 */
	--o-red: #E8415C;                /* --idp-red-lt, for text and rules on dark */
	--o-red-soft: rgba(232, 65, 92, .12);
	--o-bg: rgba(255, 255, 255, .06);
	--o-soft: rgba(255, 255, 255, .06);
	--o-line: rgba(255, 255, 255, .16);
	--o-field: rgba(255, 255, 255, .42); /* 3:1 boundary on the dark section */
	--o-ok: #7FD39A;
	--o-focus: 0 0 0 3px rgba(232, 65, 92, .35);
}
.i1o--dark .i1o-step { color: var(--o-red); }
.i1o--dark .i1o-form .i1o-field input:not([type="radio"]),
.i1o--dark .i1o-form .i1o-field select,
.i1o--dark .i1o-form .i1o-field textarea { color: #fff; background-color: rgba(255, 255, 255, .07); }
.i1o--dark .i1o-form .i1o-field select option { color: #111; background: #fff; }
.i1o--dark .i1o-form .i1o-field input::placeholder,
.i1o--dark .i1o-form .i1o-field textarea::placeholder { color: rgba(255, 255, 255, .5); }
.i1o--dark .i1o-choice input:checked + span { background: #fff; border-color: #fff; color: #121416; }
.i1o--dark .i1o-type input:checked + .i1o-type__box { background: rgba(232, 65, 92, .1); }
.i1o--dark .i1o-icon { color: var(--o-red); background: none; }
.i1o--dark .i1o-form .i1o-submit { background: #C8102E; }
.i1o--dark .i1o-form .i1o-submit:hover, .i1o--dark .i1o-form .i1o-submit:focus { background: #A60D26; }
.i1o--dark .i1o-form .i1o-submit:focus-visible { outline-color: #fff; }
.i1o--dark .i1o-alert { background: rgba(232, 65, 92, .12); color: #fff; }
.i1o--dark .i1o-done { background: rgba(255, 255, 255, .04); }
.i1o--dark .i1o-done .i1o-btn { background: #fff; color: #121416; }
.i1o--dark .i1o-done .i1o-btn:hover, .i1o--dark .i1o-done .i1o-btn:focus { background: #C8102E; color: #fff; }
.i1o--dark .i1o-done__again a { color: #fff; }
.i1o--dark .i1o-privacy a { color: #fff; }

/* Inline link in IDP prose on a dark section (homepage "Submit a property"). */
.idp-body .idp-sec--dark .idp-inlinelink { color: #fff; text-decoration: underline; text-decoration-color: var(--idp-red-lt, #E8415C); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.idp-body .idp-sec--dark .idp-inlinelink:hover { color: var(--idp-red-lt, #E8415C); }

/* Franchise path: SMS opt-in (unticked by default) and its own privacy line. */
.i1o .i1o-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; cursor: pointer; font: 500 14.5px/1.4 var(--o-font); color: var(--o-ink); }
.i1o .i1o-form .i1o-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--o-red); cursor: pointer; }
.i1o .i1o-check input:focus-visible { outline: 3px solid var(--o-ink); outline-offset: 2px; }
.i1o .i1o-check__fine { margin: 6px 0 0 30px; font-size: 12.5px; line-height: 1.45; color: var(--o-muted); }
.i1o .i1o-privacy__fr { display: none; }
/* Both conditions: a franchise answer left behind after switching type must not swap the line. */
.i1o .i1o-form:has(input[name="opp_type"][value="startup"]:checked):has(input[name="f[startup][interest]"][value="franchise"]:checked) .i1o-privacy__std { display: none; }
.i1o .i1o-form:has(input[name="opp_type"][value="startup"]:checked):has(input[name="f[startup][interest]"][value="franchise"]:checked) .i1o-privacy__fr { display: inline; }
.i1o .i1o-done__alt { font-size: 14.5px; color: var(--o-muted); }
.i1o .i1o-done__alt a { color: var(--o-ink); text-decoration: underline; text-decoration-color: var(--o-red); text-underline-offset: 3px; }