/**
 * Scoped, brand-colored styling for the Zoho onboarding form.
 *
 * Every single selector in this file is prefixed with the `.zcof-form` ancestor
 * (or is itself `.zcof-form`) - nothing here can ever match a theme's header,
 * footer, or any element outside the form itself, even in the unlikely case a
 * theme happens to reuse one of these class names elsewhere on the page.
 *
 * Colors are pulled from the site's Elementor global palette (kept as literal
 * hex values, not var(--e-global-color-*), since this stylesheet is loaded
 * standalone wherever the [zoho_onboarding_form] shortcode is placed and can't
 * assume Elementor's own custom properties are present/in scope on that page).
 */

.zcof-form {
	/* Elementor global palette */
	--zcof-primary: #009589;       /* --e-global-color-primary / --e-global-color-accent */
	--zcof-primary-hover: #376767; /* --e-global-color-a25efd3 */
	--zcof-secondary: #474B62;     /* --e-global-color-secondary */
	--zcof-heading: #282C3D;       /* --e-global-color-cdce380 */
	--zcof-text-muted: #7A7A7A;    /* --e-global-color-text */
	--zcof-white: #FFFFFF;         /* --e-global-color-59407fc */

	/* Derived, brand-tinted neutrals */
	--zcof-border: rgba(71, 75, 98, 0.18);      /* secondary, low opacity */
	--zcof-bg-subtle: rgba(0, 149, 137, 0.05);  /* primary, very low opacity */
	--zcof-focus-ring: rgba(0, 149, 137, 0.18); /* primary, low opacity */

	/* Semantic colors deliberately NOT brand-tinted - errors/success need to stay
	   universally recognizable as red/green regardless of site theme. */
	--zcof-error: #c0392b;
	--zcof-success: #1a7f37;

	--zcof-radius: 6px;

	/* Single shared spacing system, reused everywhere so boxes/gaps read as one
	   consistent rhythm rather than several close-but-different hand-tuned values.
	   Kept fairly tight (vs. a more generous 1rem/1.1rem default) so the form
	   reads as compact rather than intimidating. */
	--zcof-box-padding: 0.9rem 1.1rem 1.1rem;
	--zcof-stack-gap: 0.85rem;
	--zcof-legend-size: 0.9rem;

	max-width: 860px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.5;
	color: var(--zcof-text-muted);
	box-sizing: border-box;
}

.zcof-form *,
.zcof-form *::before,
.zcof-form *::after {
	box-sizing: inherit;
}

.zcof-form .zcof-section {
	margin-bottom: 2.5rem;
}

.zcof-form .zcof-section__title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--zcof-heading);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--zcof-border);
}

.zcof-form .zcof-help-text {
	color: var(--zcof-text-muted);
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

/* --- Static "Portal Access Key" legend block (informational, not a field) --- */

.zcof-form .zcof-legend {
	background: var(--zcof-bg-subtle);
	border: 1px solid var(--zcof-border);
	border-radius: var(--zcof-radius);
	padding: var(--zcof-box-padding);
}

.zcof-form .zcof-legend__heading {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--zcof-secondary);
}

.zcof-form .zcof-legend__item {
	margin: 0 0 0.5rem;
	font-size: 0.88rem;
	color: var(--zcof-text-muted);
}

.zcof-form .zcof-legend__item:last-child {
	margin-bottom: 0;
}

.zcof-form .zcof-legend__portal-note {
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--zcof-border);
}

.zcof-form .zcof-legend__item strong {
	color: var(--zcof-heading);
	font-weight: 600;
}

/* --- Generic field layout --- */

.zcof-form .zcof-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--zcof-stack-gap);
}

.zcof-form .zcof-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* Without this, `display: flex` above (higher specificity than the browser's
   default `[hidden] { display: none }`) wins and the hidden attribute is
   silently ignored - this is what kept Authorization Level visible. */
.zcof-form .zcof-field[hidden] {
	display: none;
}

.zcof-form .zcof-field--street {
	grid-column: 1 / -1;
}

/* --- Address wrapper (Street/City/State/ZIP/Country grouped as one unit) --- */

.zcof-form .zcof-address-wrapper {
	border: 1px solid var(--zcof-border);
	border-radius: var(--zcof-radius);
	padding: var(--zcof-box-padding);
	margin: var(--zcof-stack-gap) 0 0;
}

.zcof-form .zcof-address-wrapper__legend {
	font-weight: 600;
	font-size: var(--zcof-legend-size);
	color: var(--zcof-secondary);
	padding: 0 0.4rem;
}

.zcof-form .zcof-field__label {
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--zcof-heading);
}

.zcof-form .zcof-required {
	color: var(--zcof-error);
}

.zcof-form input[type="text"],
.zcof-form input[type="tel"],
.zcof-form input[type="email"],
.zcof-form textarea,
.zcof-form select {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--zcof-border);
	border-radius: var(--zcof-radius);
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--zcof-heading);
	background: var(--zcof-white);
}

/* --- Phone field: intl-tel-input's flag/dial-code picker (assets/vendor/intl-tel-input/) ---
   The library's own CSS handles the dropdown/flag layout; it only leaves the
   actual tel input's look (border/radius/font/colors) to this stylesheet's
   generic input rule above, and the wrapper below to give it full width. */

.zcof-form .iti {
	display: block;
	width: 100%;
}

.zcof-form input:focus,
.zcof-form textarea:focus,
.zcof-form select:focus {
	outline: none;
	border-color: var(--zcof-primary);
	box-shadow: 0 0 0 3px var(--zcof-focus-ring);
}

.zcof-form input:disabled {
	background: var(--zcof-bg-subtle);
	color: var(--zcof-text-muted);
	cursor: not-allowed;
}

.zcof-form .zcof-field--error input,
.zcof-form .zcof-field--error textarea,
.zcof-form .zcof-field--error select {
	border-color: var(--zcof-error);
}

.zcof-form .zcof-field-error-msg {
	margin: 0.2rem 0 0;
	color: var(--zcof-error);
	font-size: 0.82rem;
}

/* --- Contact blocks (fixed categories + portal user rows) --- */

.zcof-form .zcof-contact-block {
	display: flex;
	flex-direction: column;
	gap: var(--zcof-stack-gap);
	border: 1px solid var(--zcof-border);
	border-radius: var(--zcof-radius);
	padding: var(--zcof-box-padding);
	margin: 0 0 var(--zcof-stack-gap);
	background: var(--zcof-bg-subtle);
}

.zcof-form .zcof-contact-block__legend {
	font-weight: 600;
	font-size: var(--zcof-legend-size);
	color: var(--zcof-secondary);
	padding: 0 0.4rem;
}

.zcof-form .zcof-role-options {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin-top: 0.4rem;
}

.zcof-form .zcof-role-option {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
	cursor: pointer;
	color: var(--zcof-heading);
}

.zcof-form .zcof-role-option input[type="radio"] {
	accent-color: var(--zcof-primary);
}

.zcof-form .zcof-role-option__label {
	font-weight: 500;
}

.zcof-form .zcof-btn--remove-row {
	/* Normal flow, not absolutely positioned - so it always sits directly after
	   whatever content the block actually has (Authorization Level may or may
	   not be visible), instead of reserving fixed dead space for a fixed position. */
	align-self: flex-end;
	background: none;
	border: none;
	color: var(--zcof-error);
	font-size: 0.82rem;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
}

.zcof-form .zcof-btn--remove-row:hover {
	text-decoration: underline;
}

/* --- Searchable combobox (State, Country - custom-styled, not a native
   <select>/<datalist>; see form.js's initComboboxes()) --- */

.zcof-form .zcof-combobox {
	position: relative;
}

/* .zcof-combobox__input picks up the shared border/padding/radius/focus
   styling for free from the generic `input[type="text"]` rule above - no
   separate rule needed here for its own look. */

.zcof-form .zcof-combobox__listbox {
	position: absolute;
	top: calc(100% + 0.3rem);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 15rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.3rem 0;
	list-style: none;
	background: var(--zcof-white);
	border: 1px solid var(--zcof-border);
	border-radius: var(--zcof-radius);
	box-shadow: 0 8px 24px rgba(40, 44, 61, 0.12);
}

.zcof-form .zcof-combobox__option {
	padding: 0.45rem 0.75rem;
	font-size: 0.9rem;
	color: var(--zcof-heading);
	cursor: pointer;
}

.zcof-form .zcof-combobox__option--active {
	background: var(--zcof-bg-subtle);
	color: var(--zcof-primary);
}

/* --- File upload (W-9): native input visually hidden, custom button + filename --- */

.zcof-form .zcof-file-upload {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Visually-hidden, not display:none - keeps the input focusable/tabbable so
   keyboard users can still reach and operate it (see the :focus-visible rule
   below, which puts the visible focus ring on the label/button instead). */
.zcof-form .zcof-file-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.zcof-form .zcof-file-upload__input:focus-visible + .zcof-file-upload__button {
	outline: 2px solid var(--zcof-primary);
	outline-offset: 2px;
}

.zcof-form .zcof-file-upload__button {
	margin: 0;
	cursor: pointer;
}

.zcof-form .zcof-file-upload__filename {
	font-size: 0.85rem;
	color: var(--zcof-text-muted);
}

.zcof-form .zcof-file-upload__filename--selected {
	color: var(--zcof-heading);
	font-weight: 500;
}

/* --- Buttons --- */

.zcof-form .zcof-btn {
	font-size: 0.9rem;
	font-weight: 500;
	border-radius: var(--zcof-radius);
	cursor: pointer;
	border: 1px solid var(--zcof-border);
	background: var(--zcof-white);
	color: var(--zcof-heading);
	padding: 0.55rem 1rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.zcof-form .zcof-btn--add-row {
	color: var(--zcof-primary);
	border-color: var(--zcof-primary);
	background: var(--zcof-white);
}

.zcof-form .zcof-btn--add-row:hover {
	background: var(--zcof-bg-subtle);
	border-color: var(--zcof-primary-hover);
	color: var(--zcof-primary-hover);
}

.zcof-form .zcof-btn--submit {
	background: var(--zcof-primary);
	border-color: var(--zcof-primary);
	color: var(--zcof-white);
	padding: 0.7rem 1.6rem;
	font-size: 1rem;
}

.zcof-form .zcof-btn--submit:hover:not(:disabled) {
	background: var(--zcof-primary-hover);
	border-color: var(--zcof-primary-hover);
}

.zcof-form .zcof-btn--submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.zcof-form .zcof-form-actions {
	margin-top: 1.5rem;
}

/* --- Fee notice (deliberately amber/caution, not brand-tinted - it's a warning) --- */

.zcof-form .zcof-fee-notice {
	background: #fff8e5;
	border: 1px solid #f0d998;
	color: #7a5b00;
	border-radius: var(--zcof-radius);
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	margin: 0.75rem 0;
}

/* --- Honeypot (visually hidden, not display:none, so it still fools basic bots) --- */

.zcof-form .zcof-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Form-level message banner --- */

.zcof-form .zcof-form-message {
	border-radius: var(--zcof-radius);
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

.zcof-form .zcof-form-message--success {
	background: #eaf7ec;
	border: 1px solid #b7e2bd;
	color: var(--zcof-success);
}

.zcof-form .zcof-form-message--error {
	background: #fbeaea;
	border: 1px solid #f0b8b3;
	color: var(--zcof-error);
}

@media (max-width: 480px) {
	.zcof-form {
		font-size: 14px;
	}

	/* Same box-padding/stack-gap variables everywhere, just tightened further for
	   narrow screens - keeps every box (legend, address wrapper, contact block)
	   in sync with a single change instead of hand-tuning each selector again. */
	.zcof-form {
		--zcof-box-padding: 0.75rem 0.85rem 0.85rem;
		--zcof-stack-gap: 0.65rem;
	}

	.zcof-form .zcof-role-options {
		flex-direction: column;
		gap: 0.5rem;
	}

	.zcof-form .zcof-form-actions {
		display: flex;
		flex-direction: column;
	}

	.zcof-form .zcof-btn--submit {
		width: 100%;
		text-align: center;
	}
}