/* house-forms.css — owner: kevin-opencode-1. Form-library brand overrides.
 * intl-tel-input v29 skinned to the underline-input aesthetic (contact +
 * invite forms). Selector names verified against the pinned build
 * (v29 uses .iti__country-container/.iti__country-selector/button; there
 * is NO .iti__flag-container or .iti__dropdown-content — do not target
 * ghosts). If the CDN fails the plain inputs are unaffected. */

/* Side-by-side model: the flag box is an in-flow flex child OUTSIDE the
 * input — no overlay, so hit-testing cannot misdeliver clicks, and no
 * absolute positioning to fight over. Gap separates the two components. */
.cf7-business-form .iti { position: relative; display: flex; align-items: stretch; gap: 10px; width: 100%; }
/* The lib writes inline padding-left (overlay clearance) that is wrong once
 * the box sits beside the input — reset to the house flush-left. Beats
 * inline style; re-applied by lib JS on country change, hence !important. */
.cf7-business-form .iti input[name="your-phone"] { flex: 1; min-width: 0; padding-left: 0 !important; }
/* The kill shot for the overlay model: lib positions this absolute over the
 * input; static makes it a normal in-flow flex child beside the input. */
.cf7-business-form .iti__country-container { position: static; }

/* Selected-country is a <button>: theme/user-agent button chrome (pill
 * shape, focus rings) leaks onto it. Nuke everything, rebuild as plain
 * inline-flex content. Base state ONLY — an unset-bearing :hover would
 * outrank the rebuild below and collapse the box on hover (measured live:
 * 107x46 -> 85x28). Interaction states re-assert geometry instead.
 * :focus-visible keeps a house-styled ring. */
.cf7-business-form button.iti__selected-country {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  box-sizing: border-box;
}
.cf7-business-form button.iti__selected-country:focus-visible {
  outline: 2px solid #c71f1f;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Stacking: the button must paint above the full-width input (which carries
 * position:relative;z-index:0 from the lib). all:unset above wiped the lib's
 * own z-index:1 — restoring it here was the actual dropdown-killer fix. */
.cf7-business-form button.iti__selected-country {
  position: relative;
  z-index: 1;
}
/* Hit target + box look, one rule: generous padding for taps and a bordered
 * component style. In-flow box lays out once — static size, never shifts. */
.cf7-business-form button.iti__selected-country {
  padding: 8px 10px;
  margin: 0;
  touch-action: manipulation;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  background: #fff;
}
.cf7-business-form .iti__selected-dial-code { font-size: 15px; }

/* Whole-pill activator, quiet hover: the flag part carries NO hover of its
 * own — the lib's flag-half-only paint is killed below via a mirrored
 * (0,7,2) chain (its :not(:has()) args count: (0,6,2)). The hitbox IS the
 * full theme pill in default state (dial code lives inside the <button>;
 * corner clicks verified headlessly). On hover the pill does one minor
 * colour shift only — affordance, not a state change. */
.cf7-business-form .iti--has-country-selector .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country-primary:hover,
.cf7-business-form .iti--has-country-selector .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country[aria-expanded="true"] .iti__selected-country-primary {
  background-color: transparent;
}
.cf7-business-form button.iti__selected-country:hover,
.cf7-business-form button.iti__selected-country:focus,
.cf7-business-form button.iti__selected-country:active,
.cf7-business-form button.iti__selected-country[aria-expanded="true"] {
  position: relative;
  padding: 8px 10px;
  border: 1px solid #a8a8a8;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: none;
  color: #333;
}
/* Shadow escalation: the theme's :not()-stacked button:hover (0,6,1)
 * re-adds its 0 6px 15px drop shadow, outranking the state rule above.
 * Same (0,6,2) mirror treatment as the search-X fix. */
.body-container form.wpcf7-form .cf7-business-form .iti__country-container button.iti__selected-country:hover,
.body-container form.wpcf7-form .cf7-business-form .iti__country-container button.iti__selected-country:focus,
.body-container form.wpcf7-form .cf7-business-form .iti__country-container button.iti__selected-country:active,
.body-container form.wpcf7-form .cf7-business-form .iti__country-container button.iti__selected-country[aria-expanded="true"] {
  box-shadow: none;
}

/* Dropdown panel as a white house card. z-index lifts it above following
 * fields in case a sibling stacking context would otherwise bury an
 * opened-but-invisible panel (indistinguishable from a dead toggle). */
.cf7-business-form .iti__country-selector {
  font-family: Inter, Arial, sans-serif;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
  z-index: 100;
}
.cf7-business-form .iti__search-input-wrapper { border-bottom-color: #e3e3e3; }
.cf7-business-form .iti__search-input { font-family: Inter, Arial, sans-serif; font-size: 15px; color: #333; }
/* Search-row clearance: the theme's input rules beat the lib's (0,1,0)
 * padding (measured 0px/0px live), so the placeholder runs under the
 * magnifier icon and typed text under the clear X. Re-assert the lib's
 * own geometry (icon left, clear button right) at house specificity. */
.cf7-business-form .iti__search-input {
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
}
/* Search clear (X) is an icon-only button: the theme's button system
 * (red hover bg, 9999px pill radius, gradient border vars, and a
 * 0 6px 15px shadow from a (0,6,1) :not()-stacked hover chain — measured
 * live) swallows it and reads as a second pill. Outbid outright with a
 * (0,6,2) house chain (note order: the form WRAPS .cf7-business-form, not
 * vice versa — verified from live ancestry); keep the lib's subtle hover. (tabindex=-1:
 * mouse-only, so no keyboard ring is owed.) */
.body-container form.wpcf7-form .cf7-business-form .iti__search-input-wrapper button.iti__search-clear:hover,
.body-container form.wpcf7-form .cf7-business-form .iti__search-input-wrapper button.iti__search-clear:focus,
.body-container form.wpcf7-form .cf7-business-form .iti__search-input-wrapper button.iti__search-clear:active {
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  outline: none;
}
/* Theme list bullets/markers leak into country rows — kill them. */
.cf7-business-form .iti__country-list { list-style: none; }
.cf7-business-form .iti__country { border-radius: 8px; }
.cf7-business-form .iti__country::before,
.cf7-business-form .iti__country::after,
.cf7-business-form .iti__country::marker { content: none; display: none; }
.cf7-business-form .iti__country:hover { background: rgba(180, 29, 33, 0.06); }
.cf7-business-form .iti__active-country { background: rgba(180, 29, 33, 0.09); }

/* CF7-native error tip for invalid numbers (JS injects .iti-error-tip). */
.cf7-business-form .wpcf7-not-valid-tip.iti-error-tip { display: block; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .cf7-business-form .iti__selected-country,
  .cf7-business-form .iti__country { transition: none; }
}