/*
 * ACAI MetForm Theme Bridge (#63)
 *
 * Binds MetForm's controls to the theme's own colour custom properties. Every
 * declaration carries a hex fallback measured from the fc-united "formula-1"
 * skin, so if the theme stops publishing a property the form degrades to the
 * right colour rather than to MetForm's light-theme default.
 *
 * The local aliases exist because the skin publishes the same palette under two
 * spellings — `--theme-color-bg-color` inline and `--theme-color-bg_color` in
 * its scheme blocks — and which one is present depends on the page. Declaring
 * both with a shared fallback means neither spelling has to be guessed at the
 * point of use.
 */

.mf-form-wrapper {
	--acai-mf-title: var(--theme-color-title, #FFFEFE);
	--acai-mf-text: var(--theme-color-text, #FFFEFE);
	--acai-mf-meta: var(--theme-color-meta, #717A7F);
	--acai-mf-border: var(--theme-color-bd-color, var(--theme-color-bd_color, #3C4547));
	--acai-mf-bg: var(--theme-color-bg-color, var(--theme-color-bg_color, #0F181A));
	--acai-mf-surface: var(--theme-color-bg-color-2, var(--theme-color-bg_color_2, #162426));
	--acai-mf-accent: var(--theme-color-link, #C4E538);
	--acai-mf-accent-hover: var(--theme-color-hover, #CFEA5F);
	--acai-mf-danger: #FF6B6B;
}

/* ------------------------------------------------------------------ labels */

.mf-form-wrapper label,
.mf-form-wrapper .mf-input-label,
.mf-form-wrapper legend {
	color: var(--acai-mf-title);
}

/* The required marker is decoration; it should not read as an error. */
.mf-form-wrapper .mf-input-label .required,
.mf-form-wrapper .mf-input-label span[class*="required"] {
	color: var(--acai-mf-accent);
}

/* ------------------------------------------------------------------ inputs */

.mf-form-wrapper input[type="text"],
.mf-form-wrapper input[type="email"],
.mf-form-wrapper input[type="url"],
.mf-form-wrapper input[type="tel"],
.mf-form-wrapper input[type="number"],
.mf-form-wrapper input[type="date"],
.mf-form-wrapper input[type="time"],
.mf-form-wrapper input[type="password"],
.mf-form-wrapper input[type="search"],
.mf-form-wrapper textarea,
.mf-form-wrapper select,
.mf-form-wrapper .mf-input {
	color: var(--acai-mf-text);
	background-color: var(--acai-mf-surface);
	border-color: var(--acai-mf-border);
}

/* Placeholders: MetForm exposes a setting for these on some widgets and not
   others, and the ones it misses inherit the browser default, which is a mid
   grey chosen for white backgrounds. */
.mf-form-wrapper input::placeholder,
.mf-form-wrapper textarea::placeholder {
	color: var(--acai-mf-meta);
	opacity: 1;   /* Firefox dims placeholders by default; the colour above is already muted */
}

.mf-form-wrapper input:focus,
.mf-form-wrapper textarea:focus,
.mf-form-wrapper select:focus {
	border-color: var(--acai-mf-accent);
	outline-color: var(--acai-mf-accent);
}

/* The native dropdown list is drawn by the OS from the element's own colours,
   so the option rows need stating explicitly or they render dark-on-dark. */
.mf-form-wrapper select option {
	color: var(--acai-mf-text);
	background-color: var(--acai-mf-surface);
}

/* Chrome paints autofilled fields with a hardcoded near-white background and
   dark text, which undoes everything above. The inset shadow is the only way
   to repaint it. */
.mf-form-wrapper input:-webkit-autofill,
.mf-form-wrapper input:-webkit-autofill:hover,
.mf-form-wrapper input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--acai-mf-text);
	box-shadow: 0 0 0 1000px var(--acai-mf-surface) inset;
}

/* ----------------------------------------------------- radios and checkboxes */

/*
 * The real class names are .mf-radio-option and .mf-checkbox-option, each
 * wrapping `<label><input><span>text</span></label>`. MetForm gives the option
 * text its own Elementor control (mf_input_option_color) whose default is
 * #000000, and that control's selector targets the option div — so the field
 * label colour never reaches it. The builder sets that control; these rules are
 * the safety net for forms built by hand in the editor, which will still carry
 * the black default.
 *
 * !important is deliberate and limited to this block: the widget control emits
 * `.elementor-element-<id> .mf-radio-option{color:#000}`, which is a higher
 * specificity than anything a plugin stylesheet can reach without matching
 * Elementor's own generated selector.
 */
.mf-form-wrapper .mf-radio-option,
.mf-form-wrapper .mf-checkbox-option,
.mf-form-wrapper .mf-radio-option label,
.mf-form-wrapper .mf-checkbox-option label,
.mf-form-wrapper .mf-radio-option span,
.mf-form-wrapper .mf-checkbox-option span {
	color: var(--acai-mf-text) !important;
}

/* The tick and dot are drawn as a Font Awesome glyph in a ::before on the span
   after the input, so they take colour from that pseudo-element, not the box. */
.mf-form-wrapper .mf-radio-option input[type="radio"] + span::before,
.mf-form-wrapper .mf-checkbox-option input[type="checkbox"] + span::before {
	color: var(--acai-mf-meta);
}

.mf-form-wrapper .mf-radio-option input[type="radio"]:checked + span::before,
.mf-form-wrapper .mf-checkbox-option input[type="checkbox"]:checked + span::before {
	color: var(--acai-mf-accent);
}

.mf-form-wrapper input[type="radio"],
.mf-form-wrapper input[type="checkbox"] {
	accent-color: var(--acai-mf-accent);
}

/* ------------------------------------------------------------ file uploads */

.mf-form-wrapper .mf-input-file,
.mf-form-wrapper .mf-file-upload,
.mf-form-wrapper .dropzone,
.mf-form-wrapper .mf-dropzone {
	color: var(--acai-mf-text);
	background-color: var(--acai-mf-surface);
	border: 1px dashed var(--acai-mf-border);
}

.mf-form-wrapper .dropzone .dz-message,
.mf-form-wrapper .mf-file-upload__label,
.mf-form-wrapper .mf-input-file-text {
	color: var(--acai-mf-meta);
}

/* The button inside a file field is a browser widget; on a dark surface it
   needs its own colours or it stays light grey with black text. */
.mf-form-wrapper input[type="file"]::file-selector-button {
	color: var(--acai-mf-bg);
	background-color: var(--acai-mf-accent);
	border: 0;
	border-radius: 6px;
	padding: 0.5em 1em;
	cursor: pointer;
}

/* ------------------------------------------------- help text and validation */

.mf-form-wrapper .mf-input-help,
.mf-form-wrapper .mf-help-text,
.mf-form-wrapper small,
.mf-form-wrapper .description {
	color: var(--acai-mf-meta);
}

.mf-form-wrapper .mf-error-message,
.mf-form-wrapper .error,
.mf-form-wrapper .invalid-feedback,
.mf-form-wrapper .mf-response-error {
	color: var(--acai-mf-danger);
}

.mf-form-wrapper .mf-response-success,
.mf-form-wrapper .mf-success-message {
	color: var(--acai-mf-accent);
}

/* -------------------------------------------------------------- the button */

.mf-form-wrapper button[type="submit"],
.mf-form-wrapper .mf-btn {
	color: var(--acai-mf-bg);
	background-color: var(--acai-mf-accent);
	border-color: var(--acai-mf-accent);
}

.mf-form-wrapper button[type="submit"]:hover,
.mf-form-wrapper .mf-btn:hover,
.mf-form-wrapper button[type="submit"]:focus-visible,
.mf-form-wrapper .mf-btn:focus-visible {
	color: var(--acai-mf-bg);
	background-color: var(--acai-mf-accent-hover);
	border-color: var(--acai-mf-accent-hover);
}

/* --------------------------------------------------------------- flatpickr */

/* The date picker renders in a detached container appended to <body>, so it
   sits outside .mf-form-wrapper and misses everything above. */
.flatpickr-calendar {
	background: var(--theme-color-bg-color-2, #162426);
	color: var(--theme-color-title, #FFFEFE);
	border: 1px solid var(--theme-color-bd-color, #3C4547);
}

.flatpickr-calendar .flatpickr-day {
	color: var(--theme-color-title, #FFFEFE);
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
	color: var(--theme-color-meta, #717A7F);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day:hover {
	color: var(--theme-color-bg-color, #0F181A);
	background: var(--theme-color-link, #C4E538);
	border-color: var(--theme-color-link, #C4E538);
}

.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekday {
	color: var(--theme-color-title, #FFFEFE);
	fill: var(--theme-color-title, #FFFEFE);
}

/* ------------------------------------------------------------ long form UX */

/* 39 textareas in a column is a wall. Give them room to breathe and a visible
   section rhythm; the headings come from the build script. */
.mf-form-wrapper textarea {
	min-height: 7em;
	line-height: 1.5;
	resize: vertical;
}