/* ==========================================================================
   iCAUR RMA — Forminator skin for all dealer forms:
     icaur-register-interest.json  (ลงทะเบียนความสนใจ V27 — homepage / V27 page)
     icaur-test-drive.json         (จองทดลองขับ — /test-drive/)
     icaur-contact.json            (ติดต่อเรา — /contact/)
   Import each with Design style: None. The rules below are scoped to .forminator-ui,
   not to a wrapper class, so every dealer form is styled the same on any page with no
   extra markup. .register-form-wrap is only the optional white card around a form.
   Tokens match landing/css/style.css / docs/DESIGN.md.
   Needs the "Mitr" @font-face rules from style.css (or the theme). Thai site → Mitr only.
   ========================================================================== */
.forminator-ui.forminator-custom-form {
  --icr-gold: #C19459; --icr-gold-fill: #C49F70; --icr-gold-soft: #CDA484;
  --icr-ink: #231815; --icr-muted: #6B6660; --icr-line: #CFC9C1; --icr-error: #C2412D;
  font-family: "Mitr", system-ui, sans-serif;
  font-weight: 400; color: #222; max-width: 620px; margin: 0;
}
.forminator-ui .forminator-row { margin-bottom: 22px; }
.forminator-ui .forminator-row:last-child { margin-bottom: 0; }

/* Labels */
.forminator-ui .forminator-label {
  display: block; margin: 0 0 6px; font-size: 15px; font-weight: 400; color: var(--icr-ink); line-height: 1.5;
}
.forminator-ui .forminator-required { color: var(--icr-gold); }

/* Text inputs: underline only */
.forminator-ui .forminator-input,
.forminator-ui input[type="tel"].forminator-input {
  width: 100%; height: 48px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--icr-line); border-radius: 0;
  background: transparent; box-shadow: none; font: inherit; font-size: 16px; font-weight: 400; color: var(--icr-ink);
  transition: border-color .3s;
}
.forminator-ui .forminator-input::placeholder { color: #A9A29A; }
.forminator-ui .forminator-input:focus { outline: none; border-bottom-color: var(--icr-gold); box-shadow: 0 1px 0 0 var(--icr-gold); }
.forminator-ui .iti { width: 100%; }

/* Textarea (contact message) */
.forminator-ui .forminator-textarea {
  width: 100%; min-height: 120px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--icr-line); border-radius: 0;
  background: transparent; box-shadow: none; font: inherit; font-size: 16px; color: var(--icr-ink); resize: vertical;
}
.forminator-ui .forminator-textarea:focus { outline: none; border-bottom-color: var(--icr-gold); box-shadow: 0 1px 0 0 var(--icr-gold); }
.forminator-ui .forminator-description { font-size: 12px; color: var(--icr-muted); }

/* Select (test-drive time slot)
   FIX: Forminator 1.5x ("select" field type) no longer renders select2 — it
   emits a plain native <select class="forminator-select">. With
   fields-style:none the browser's bare dropdown showed through unstyled.
   The select2-* rules below are kept as a harmless no-op fallback in case a
   form ever re-enables the select2-based widget; the native rule underneath
   is the one actually doing the work today. Verify against the live
   markup — if Forminator wraps the native select in a custom widget class,
   that wrapper selector may need adding here too. */
.forminator-ui .select2-container .select2-selection--single {
  height: 48px; border: 0; border-bottom: 1px solid var(--icr-line); border-radius: 0; background: transparent; box-shadow: none;
}
.forminator-ui .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 48px; font-size: 16px; font-weight: 400; color: var(--icr-ink);
}
.forminator-ui .select2-container .select2-selection__placeholder { color: #A9A29A; }
.forminator-ui .select2-container--open .select2-selection--single,
.forminator-ui .select2-container--focus .select2-selection--single { border-bottom-color: var(--icr-gold); box-shadow: 0 1px 0 0 var(--icr-gold); }
.forminator-select-dropdown-container .select2-dropdown { border: 1px solid var(--icr-line, #CFC9C1); border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.08); font-family: "Mitr", system-ui, sans-serif; }
.forminator-select-dropdown-container .select2-results__option { padding: 12px 16px; font-size: 15px; }
.forminator-select-dropdown-container .select2-results__option--highlighted { background: #FBF6EF !important; color: #231815 !important; }
.forminator-select-dropdown-container .select2-results__option[aria-selected="true"] { background: #C49F70 !important; color: #000 !important; }

/* Native <select> — the actual fix for the unstyled dropdown */
.forminator-ui select.forminator-input,
.forminator-ui .forminator-select select,
.forminator-ui select.forminator-select {
  width: 100%; height: 48px; padding: 8px 28px 8px 0; border: 0; border-bottom: 1px solid var(--icr-line); border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23231815' stroke-width='1.6' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px 9px;
  box-shadow: none; font: inherit; font-size: 16px; font-weight: 400; color: var(--icr-ink);
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  transition: border-color .3s;
}
.forminator-ui select.forminator-input::-ms-expand { display: none; }
.forminator-ui select.forminator-input:focus,
.forminator-ui .forminator-select select:focus,
.forminator-ui select.forminator-select:focus {
  outline: none; border-bottom-color: var(--icr-gold); box-shadow: 0 1px 0 0 var(--icr-gold);
}
/* The unselected placeholder option ("เลือกช่วงเวลา") reads muted like other placeholders */
.forminator-ui select.forminator-input option[value=""] { color: #A9A29A; }

/* Date picker (test-drive date; earliest = tomorrow) */
.forminator-ui .forminator-input-with-icon [class*="forminator-icon-"] { color: var(--icr-gold); left: auto; right: 0; }
.forminator-ui .forminator-input-with-icon .forminator-input { padding-left: 0; padding-right: 28px; }
.forminator-calendar { border: 1px solid #CFC9C1 !important; border-radius: 0 !important; font-family: "Mitr", system-ui, sans-serif !important; }
.forminator-calendar .ui-state-active, .forminator-calendar td a.ui-state-active { background: #C49F70 !important; color: #000 !important; border-radius: 2px !important; }
.forminator-calendar .ui-state-hover { background: #FBF6EF !important; }
.forminator-calendar .ui-state-disabled { opacity: .35 !important; }

/* Radio: grade / topic tiles */
.forminator-ui .icr-choice-tiles .forminator-field { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .forminator-ui .icr-choice-tiles .forminator-field { grid-template-columns: repeat(4, 1fr); } }
.forminator-ui .icr-choice-tiles .forminator-field > .forminator-label,
.forminator-ui .icr-choice-tiles .forminator-field > .forminator-error-message { grid-column: 1 / -1; }
.forminator-ui .icr-choice-tiles .forminator-radio { position: relative; margin: 0; }
.forminator-ui .icr-choice-tiles .forminator-radio input { position: absolute; opacity: 0; inset: 0; }
.forminator-ui .icr-choice-tiles .forminator-radio-bullet { display: none; }
.forminator-ui .icr-choice-tiles .forminator-radio-label {
  display: grid; place-items: center; min-height: 52px; padding: 8px; margin: 0; text-align: center;
  border: 1px solid var(--icr-line); font-size: 14px; font-weight: 400; color: #222; cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.forminator-ui .icr-choice-tiles .forminator-radio:hover .forminator-radio-label { border-color: var(--icr-gold-soft); }
.forminator-ui .icr-choice-tiles .forminator-radio input:checked ~ .forminator-radio-label {
  border-color: var(--icr-gold); background: #FBF6EF; color: var(--icr-ink); box-shadow: inset 0 0 0 1px var(--icr-gold);
}
.forminator-ui .icr-choice-tiles .forminator-radio input:focus-visible ~ .forminator-radio-label { outline: 2px solid var(--icr-gold); outline-offset: 2px; }

/* Checkboxes + consent
   FIX (doubled box): nothing previously hid the native <input
   type="checkbox">, so it rendered as its own browser-default box as a
   flex sibling next to .forminator-checkbox-box — two visible squares.
   The native input is now positioned exactly over the styled box
   (opacity:0, sized/placed to match) so there is only ever one visible
   control; it stays in the DOM and clickable/keyboard-focusable for
   accessibility. Also added the checkmark glyph itself: a color was set
   on ::before for the checked state but nothing ever gave that
   pseudo-element content, so no checkmark could ever appear. */
.forminator-ui .forminator-checkbox,
.forminator-ui .forminator-consent {
  position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 6px; min-height: 32px; cursor: pointer;
}
.forminator-ui .forminator-checkbox input[type="checkbox"],
.forminator-ui .forminator-consent input[type="checkbox"] {
  position: absolute; top: 3px; left: 0; width: 20px; height: 20px; margin: 0; padding: 0;
  opacity: 0; z-index: 2; cursor: pointer;
}
.forminator-ui .forminator-checkbox-box {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; border: 1px solid #B8B1A8; border-radius: 2px; background: #fff;
  display: grid; place-items: center; transition: background-color .2s, border-color .2s;
}
.forminator-ui .forminator-checkbox-box::before {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #000; border-bottom: 2px solid #000;
  transform: rotate(-45deg); opacity: 0; transition: opacity .15s;
}
.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box { background: var(--icr-gold-fill); border-color: var(--icr-gold-fill); }
.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box::before { opacity: 1; }
.forminator-ui .forminator-checkbox input:focus-visible + .forminator-checkbox-box { outline: 2px solid var(--icr-gold); outline-offset: 2px; }
.forminator-ui .forminator-checkbox-label,
.forminator-ui .forminator-checkbox .forminator-consent__label { font-size: 15px; font-weight: 300; color: #3A3532; line-height: 1.6; }
.forminator-ui .forminator-consent a { color: var(--icr-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Privacy note */
.forminator-ui .icr-privacy { margin: 0; font-size: 12px; color: var(--icr-muted); }

/* Submit */
.forminator-ui .forminator-button-submit {
  width: 100%; min-height: 52px; padding: 0 28px; border: 0; border-radius: 2px;
  background: var(--icr-gold-fill); color: #000; font: inherit; font-size: 16px; font-weight: 500; letter-spacing: .04em;
  cursor: pointer; transition: background-color .3s, transform .3s;
}
.forminator-ui .forminator-button-submit:hover { background: var(--icr-gold-soft); }
.forminator-ui .forminator-button-submit:active { transform: translateY(1px); }
.forminator-ui .forminator-button-submit:focus-visible { outline: 2px solid var(--icr-gold); outline-offset: 3px; }

/* Errors */
.forminator-ui .forminator-has_error .forminator-input { border-bottom-color: var(--icr-error); }
.forminator-ui .forminator-error-message { display: block; margin-top: 4px; padding: 0; background: none; color: var(--icr-error); font-size: 13px; }

/* Response / notification message
   FIX (colored bar visible before submission): the plugin's own base
   stylesheet paints .forminator-response-message with a background even
   before Forminator adds the .forminator-success/.forminator-error
   modifier class — that's the empty pink bar sitting under the form title
   at rest. Zero it out by default and only let each state's own rule
   (below) paint a background once Forminator actually populates it. */
.forminator-ui .forminator-response-message {
  background: none; border: 0; padding: 0; margin: 0; min-height: 0;
}
.forminator-ui .forminator-response-message:empty { display: none; }
.forminator-ui .forminator-response-message.forminator-error {
  background: #FBEDEA; color: var(--icr-error); border: 0; border-radius: 0; padding: 12px 16px; margin-bottom: 22px;
}

/* Thank-you message */
.forminator-ui .forminator-response-message.forminator-success {
  background: none; border: 0; border-left: 2px solid var(--icr-gold); border-radius: 0; padding: 4px 0 4px 16px; margin-bottom: 22px; color: var(--icr-ink);
}
.forminator-ui .forminator-response-message.forminator-success p { margin: 0 0 6px; font-size: 16px; }
/* --- Native <select> -------------------------------------------------------
   select2 does NOT initialise on this form: there is no .select2-container in the
   DOM, so every .select2-* rule above matches nothing and the field falls back to
   the browser's default control. Style the native <select> itself, with the same
   underline treatment .field--static select has in the prototype. The select2 rules
   are left in place for forms where the widget does load.
   Structure: .forminator-field-select > .forminator-field > label + select        */
.forminator-ui .forminator-field-select .forminator-field { position: relative; }

.forminator-ui select.forminator-select--field {
	width: 100%;
	height: 48px;
	padding: 8px 28px 8px 0;
	border: 0;
	border-bottom: 1px solid var(--icr-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 16px;
	color: var(--icr-ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .3s;
}
.forminator-ui select.forminator-select--field:focus {
	outline: none;
	border-bottom-color: var(--icr-gold);
	box-shadow: 0 1px 0 0 var(--icr-gold);
}
/* Gold chevron. Drawn as a mask rather than a coloured data-URI so the colour still
   comes from the palette instead of a hex frozen into the icon. */
.forminator-ui .forminator-field-select .forminator-field::after {
	content: "";
	position: absolute;
	right: 2px;
	bottom: 16px;
	width: 16px;
	height: 16px;
	background: var(--icr-gold);
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Consent checkbox on one line with its message -------------------------
   Forminator puts the checkbox inside <label class="forminator-checkbox"> and the
   message in a SIBLING <div class="forminator-checkbox__label">. The wrapper around
   them is display:block, so they stack. The row has to be the wrapper, not the label.
   (The native input is already opacity:0 + absolute under the styled box, so this is
   not the doubled-checkbox problem — there is only one visible control.)          */
.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.forminator-ui .forminator-field-consent .forminator-checkbox {
	flex: 0 0 auto;
	gap: 0;
	margin: 0;
	min-height: 0;
}
.forminator-ui .forminator-field-consent .forminator-checkbox-box {
	margin-top: 2px;   /* centres the 20px box on the first 24px line of the message */
}
.forminator-ui .forminator-field-consent .forminator-checkbox__label {
	flex: 1;
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 75%, var(--wp--preset--color--muted));
}

/* --- Consent checkbox on one line with its message -------------------------
   Forminator puts the checkbox inside <label class="forminator-checkbox"> and the
   message in a SIBLING <div class="forminator-checkbox__label">. The wrapper around
   them is display:block, so they stack. The row has to be the wrapper, not the label.
   (The native input is already opacity:0 + absolute under the styled box, so this is
   not the doubled-checkbox problem — there is only one visible control.)          */
.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.forminator-ui .forminator-field-consent .forminator-checkbox {
	flex: 0 0 auto;
	gap: 0;
	margin: 0;
	min-height: 0;
}
.forminator-ui .forminator-field-consent .forminator-checkbox-box {
	margin-top: 2px;   /* centres the 20px box on the first 24px line of the message */
}
.forminator-ui .forminator-field-consent .forminator-checkbox__label {
	flex: 1;
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 75%, var(--wp--preset--color--muted));
}