.owf-form {
	--owf-ink:    var(--owc-ink, #0f172a);
	--owf-body:   var(--owc-body, #475569);
	--owf-muted:  var(--owc-smoke, #64748b);
	--owf-border: var(--owc-fog, #e2e8f0);
	--owf-line:   var(--owc-mist, #f1f5f9);
	--owf-bg:     var(--owc-paper, #ffffff);
	--owf-accent: var(--owc-accent, #ea580c);
	--owf-error:  #dc2626;
	--owf-success:#15803d;
	font-family: -apple-system, BlinkMacSystemFont, "Inter Tight", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--owf-body);
	max-width: 100%;
	display: grid;
	gap: 1.1rem;
}
.owf-form * { box-sizing: border-box; }
/* Specificity-defensive selectors with !important — themes like OW Canvas have rules
   like ".owb-imported label" that have higher specificity than ".owf-label". */
.owf-form .owf-field { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; }
.owf-form .owf-label,
.owf-form label.owf-label,
.owb-imported .owf-form .owf-label,
.owb-imported .owf-form label.owf-label {
	font-size: .9rem !important;
	font-weight: 600 !important;
	color: var(--owf-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	display: block !important;
}
.owf-form .owf-required { color: var(--owf-accent) !important; }
.owf-form .owf-help  { color: var(--owf-muted) !important; font-size: .82rem !important; margin: 0 !important; }
.owf-form .owf-error { color: var(--owf-error) !important; font-size: .82rem !important; margin: .15rem 0 0 !important; }

.owf-form input[type="text"],
.owf-form input[type="email"],
.owf-form input[type="tel"],
.owf-form input[type="url"],
.owf-form input[type="number"],
.owf-form input[type="date"],
.owf-form input[type="time"],
.owf-form input[type="datetime-local"],
.owf-form input[type="file"],
.owf-form textarea,
.owf-form select,
.owb-imported .owf-form input,
.owb-imported .owf-form textarea,
.owb-imported .owf-form select {
	width: 100% !important;
	padding: .75rem .9rem !important;
	border: 1px solid var(--owf-border) !important;
	border-radius: 10px !important;
	background: var(--owf-bg) !important;
	color: var(--owf-ink) !important;
	font: inherit !important;
	font-size: 1rem !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}
.owf-form textarea { resize: vertical !important; min-height: 6.5rem !important; }
.owf-form input::placeholder,
.owf-form textarea::placeholder { color: var(--owf-muted) !important; opacity: .7 !important; }
.owf-form input:focus,
.owf-form textarea:focus,
.owf-form select:focus {
	outline: none;
	border-color: var(--owf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--owf-accent) 20%, transparent);
}
.owf-form .owf-field.has-error input,
.owf-form .owf-field.has-error textarea,
.owf-form .owf-field.has-error select { border-color: var(--owf-error); }

.owf-form .owf-radio,
.owf-form .owf-checkbox {
	display: flex !important;
	align-items: flex-start !important;
	gap: .55rem !important;
	cursor: pointer;
	padding: .35rem 0 !important;
	margin: 0 !important;
	color: var(--owf-body) !important;
	font-size: .92rem !important;
	line-height: 1.45 !important;
	width: auto !important;
}
/* Reset native checkbox/radio sizing AND appearance — themes like OW Canvas force
   inputs to width:100% height:2.5rem which breaks checkbox/radio rendering.
   We use appearance:none + custom SVG check so the look is consistent in light/dark
   regardless of the OS theme (which would otherwise dictate the native style). */
.owf-form input[type="checkbox"],
.owf-form input[type="radio"],
.owb-imported .owf-form input[type="checkbox"],
.owb-imported .owf-form input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	display: inline-block !important;
	flex: 0 0 18px !important;
	margin: .15rem 0 0 0 !important;
	padding: 0 !important;
	border: 1.5px solid var(--owf-border) !important;
	border-radius: 4px !important;
	background: var(--owf-bg) !important;
	box-shadow: none !important;
	vertical-align: middle !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer;
	position: relative;
	transition: background-color .12s ease, border-color .12s ease;
}
.owf-form input[type="checkbox"]:hover,
.owf-form input[type="radio"]:hover { border-color: var(--owf-accent) !important; }
.owf-form input[type="checkbox"]:focus-visible,
.owf-form input[type="radio"]:focus-visible {
	outline: 2px solid var(--owf-accent) !important;
	outline-offset: 1px !important;
}
.owf-form input[type="radio"],
.owb-imported .owf-form input[type="radio"] { border-radius: 50% !important; }

/* Checked state — orange fill + white check (custom SVG via background-image) */
.owf-form input[type="checkbox"]:checked,
.owb-imported .owf-form input[type="checkbox"]:checked {
	background: var(--owf-accent) !important;
	border-color: var(--owf-accent) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E") !important;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.owf-form input[type="radio"]:checked,
.owb-imported .owf-form input[type="radio"]:checked {
	background: var(--owf-accent) !important;
	border-color: var(--owf-accent) !important;
	background-image: radial-gradient(circle, #fff 30%, transparent 35%) !important;
}
.owf-form .owf-radio span,
.owf-form .owf-checkbox span {
	flex: 1 1 auto;
	color: var(--owf-body) !important;
}
.owf-form .owf-consent {
	padding-top: .25rem !important;
	font-size: .88rem !important;
	color: var(--owf-muted) !important;
}
.owf-form .owf-consent span { color: var(--owf-muted) !important; }
.owf-form .owf-consent a { color: var(--owf-accent) !important; }

.owf-rating { display: inline-flex; gap: .25rem; direction: rtl; }
.owf-rating__star input { position: absolute; opacity: 0; pointer-events: none; }
.owf-rating__star span {
	font-size: 1.6rem; color: var(--owf-line); cursor: pointer; transition: color .12s;
}
.owf-rating__star input:checked ~ span,
.owf-rating__star:hover span,
.owf-rating__star:hover ~ .owf-rating__star span { color: #fbbf24; }

.owf-actions { display: flex; align-items: center; gap: .9rem; margin-top: .25rem; }
.owf-submit {
	border: 0;
	background: var(--owf-accent);
	color: #fff;
	padding: .85rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: .5rem;
	transition: filter .15s ease, transform .1s ease;
	min-height: 44px;
}
.owf-submit:hover { filter: brightness(1.08); }
.owf-submit:active { transform: translateY(1px); }
.owf-submit:disabled { opacity: .55; cursor: not-allowed; }

.owf-spinner {
	width: 18px; height: 18px;
	border: 2px solid var(--owf-line);
	border-top-color: var(--owf-accent);
	border-radius: 50%;
	animation: owf-spin .7s linear infinite;
}
@keyframes owf-spin { to { transform: rotate(360deg); } }

.owf-message {
	padding: .85rem 1.05rem;
	border-radius: 10px;
	font-size: .92rem;
	line-height: 1.5;
}
.owf-message.is-success {
	background: color-mix(in srgb, var(--owf-success) 10%, transparent);
	color: var(--owf-success);
	border: 1px solid color-mix(in srgb, var(--owf-success) 30%, transparent);
}
.owf-message.is-error {
	background: color-mix(in srgb, var(--owf-error) 10%, transparent);
	color: var(--owf-error);
	border: 1px solid color-mix(in srgb, var(--owf-error) 30%, transparent);
}

/* Dark mode — applied via :
   1. <html data-theme="dark"> (manual toggle by OW Canvas)
   2. prefers-color-scheme:dark when user hasn't manually forced light
   3. .owf-form--dark class on the form itself (forced) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .owf-form {
		--owf-ink:    var(--owc-dark-ink, #f5f5f5);
		--owf-body:   var(--owc-dark-body, #d4d4d8);
		--owf-muted:  var(--owc-dark-smoke, #a1a1aa);
		--owf-border: var(--owc-dark-fog, #27272a);
		--owf-line:   #1f1f23;
		--owf-bg:     var(--owc-dark-bg-card, #18181b);
	}
}
[data-theme="dark"] .owf-form,
.owf-form.owf-form--dark {
	--owf-ink:    var(--owc-dark-ink, #f5f5f5);
	--owf-body:   var(--owc-dark-body, #d4d4d8);
	--owf-muted:  var(--owc-dark-smoke, #a1a1aa);
	--owf-border: var(--owc-dark-fog, #3f3f46);
	--owf-line:   #1f1f23;
	--owf-bg:     var(--owc-dark-bg-card, #232328);
	--owf-accent: var(--owc-accent, #fb923c);
}

/* When the form is inside a section with a dark inline background (e.g. CTA dark banners),
   auto-activate dark mode for the form. Covers monbox-style sections with #0f172a, #000, #18181b. */
section[style*="background:#0f172a"] .owf-form,
section[style*="background: #0f172a"] .owf-form,
section[style*="background:#0a0a0a"] .owf-form,
section[style*="background:#000"] .owf-form,
section[style*="background:#18181b"] .owf-form,
section[style*="background:#1e293b"] .owf-form,
section[style*="background:linear-gradient(135deg,#0f172a"] .owf-form,
section[style*="background:linear-gradient(135deg, #0f172a"] .owf-form {
	--owf-ink:    #f5f5f5;
	--owf-body:   #d4d4d8;
	--owf-muted:  #a1a1aa;
	--owf-border: #3f3f46;
	--owf-line:   #27272a;
	--owf-bg:     #232328;
	--owf-accent: #fb923c;
}

/* Mobile */
@media (max-width: 640px) {
	.owf-submit { width: 100%; justify-content: center; }
	.owf-actions { flex-direction: column; align-items: stretch; }
}