/* HOSTREND INPUT & FORM COMPONENT SYSTEM v1.0 */
.host-form-field{display:grid;gap:var(--form-field-gap);min-width:0}
.host-form__label{font-family:var(--font-primary);font-size:var(--form-label-size);font-weight:var(--form-label-weight);line-height:var(--form-label-line);color:var(--color-dark);margin:0}
.host-form__required{color:var(--color-error);font-weight:var(--font-weight-medium)}
.host-form__help{font-family:var(--font-secondary);font-size:var(--form-help-size);line-height:var(--form-help-line);font-weight:var(--font-weight-regular);color:var(--color-secondary-text)}
.host-form__message{display:flex;align-items:flex-start;gap:var(--space-4);font-family:var(--font-secondary);font-size:var(--form-help-size);line-height:var(--form-help-line);font-weight:var(--font-weight-regular)}
.host-form__message--error{color:var(--color-error)}
.host-form__message--success{color:var(--color-success)}
.host-form-control-wrap{position:relative;display:flex;align-items:center;width:100%}
.host-form-control{width:100%;min-width:0;box-sizing:border-box;height:var(--form-control-height);padding:0 var(--form-control-padding-x);border:var(--form-border-width) solid var(--form-border-default);border-radius:var(--form-input-radius);background:var(--form-control-background);color:var(--color-dark);font-family:var(--font-primary);font-size:var(--form-control-font-size);font-weight:var(--form-control-font-weight);line-height:var(--form-control-line);letter-spacing:var(--tracking-normal);outline:none;transition:var(--form-transition)}
.host-form-control::placeholder{color:var(--color-secondary-text);opacity:.78}
.host-form-control:hover:not(:disabled){border-color:var(--form-border-hover)}
.host-form-control:focus{border-width:var(--form-border-focus-width);border-color:var(--form-border-focus);box-shadow:var(--focus-ring)}
.host-form-field--error .host-form-control,.host-form-control[aria-invalid="true"]{border-width:var(--form-border-state-width);border-color:var(--form-border-error)}
.host-form-field--success .host-form-control{border-width:var(--form-border-state-width);border-color:var(--form-border-success)}
.host-form-control:disabled{background:var(--form-control-disabled-background);color:var(--color-neutral-400);border-color:var(--form-border-disabled);cursor:not-allowed;opacity:1}
.host-form-control[readonly]{background:var(--color-background)}
.host-form-control--icon-left{padding-left:calc(var(--form-control-padding-x) + var(--form-input-icon-size) + var(--icon-gap))}
.host-form-control--icon-right{padding-right:calc(var(--form-control-padding-x) + var(--form-input-icon-size) + var(--icon-gap))}
.host-form__icon{position:absolute;z-index:1;width:var(--form-input-icon-size);height:var(--form-input-icon-size);display:inline-flex;align-items:center;justify-content:center;color:var(--icon-color-secondary);pointer-events:none}
.host-form__icon--left{left:var(--form-control-padding-x)}
.host-form__icon--right{right:var(--form-control-padding-x)}
.host-form__icon svg{width:100%;height:100%;display:block}
.host-form__icon-button{position:absolute;right:var(--form-control-padding-x);width:var(--form-input-icon-size);height:var(--form-input-icon-size);padding:0;border:0;background:transparent;color:var(--icon-color-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-sm)}
.host-form__icon-button:hover{color:var(--icon-color-primary);background:var(--color-hover-surface)}
.host-form__icon-button:focus-visible{outline:var(--border-width-strong) solid var(--border-focus);outline-offset:2px}
.host-textarea{height:auto;min-height:var(--form-textarea-height);padding:var(--form-control-padding-y) var(--form-control-padding-x);resize:vertical;line-height:var(--form-textarea-line)}
.host-search-input{border-radius:var(--form-search-radius)}
.host-select-wrap{position:relative}
.host-select{appearance:none;padding-right:calc(var(--form-control-padding-x) + 28px)}
.host-form__select-icon{position:absolute;right:var(--form-control-padding-x);top:50%;width:var(--form-select-icon-size);height:var(--form-select-icon-size);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--icon-color-secondary);pointer-events:none}
.host-form__select-icon svg{display:block;width:100%;height:100%}
.host-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--icon-gap);text-align:left;cursor:pointer;position:relative;padding-right:var(--form-control-padding-x)}
.host-select-trigger:disabled{cursor:not-allowed}
.host-select-trigger__text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host-select-popover{position:relative;margin-top:var(--space-8);z-index:20;padding:var(--space-8);border:var(--border-width-subtle) solid var(--border-default);border-radius:var(--radius-popover);background:var(--color-white);box-shadow:var(--shadow-floating);animation:host-form-enter var(--motion-medium) var(--ease-enter) both}
.host-select-search-wrap{position:relative;display:flex;align-items:center;margin-bottom:var(--space-8)}
.host-select-search-wrap>span{position:absolute;left:var(--form-control-padding-x);width:var(--form-input-icon-size);height:var(--form-input-icon-size);display:inline-flex;color:var(--icon-color-secondary);pointer-events:none}
.host-select-search{padding-left:calc(var(--form-control-padding-x) + var(--form-input-icon-size) + var(--icon-gap));height:var(--form-control-height-sm)}
.host-select-options{display:grid;gap:var(--space-4);max-height:240px;overflow:auto}
.host-select-option{min-height:var(--form-option-height);display:flex;align-items:center;width:100%;padding:0 var(--space-12);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-dark);font-family:var(--font-primary);font-size:var(--form-option-size);font-weight:var(--font-weight-regular);text-align:left;cursor:pointer}
.host-select-option:hover{background:var(--color-hover-surface);color:var(--color-primary)}
.host-select-option.is-selected{background:var(--color-active-surface);color:var(--color-primary);font-weight:var(--font-weight-medium)}
.host-select-option:focus-visible{outline:var(--border-width-strong) solid var(--border-focus);outline-offset:-2px}
.host-multiselect__chips{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;min-width:0;flex:1}
.host-multiselect__placeholder{color:var(--color-secondary-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-form__chip{display:inline-flex;align-items:center;gap:var(--space-4);padding:4px 8px;border-radius:var(--radius-pill);background:var(--color-blue-50);color:var(--color-primary);font-family:var(--font-primary);font-size:var(--form-chip-size);font-weight:var(--font-weight-medium);line-height:1.3;white-space:nowrap}
.host-form__chip-remove{font-size:14px;line-height:1;color:currentColor}
.host-multi-option{min-height:var(--form-option-height);display:flex;align-items:center;gap:var(--space-8);padding:0 var(--space-12);border-radius:var(--radius-sm);font-family:var(--font-primary);font-size:var(--form-option-size);color:var(--color-dark);cursor:pointer}
.host-multi-option:hover{background:var(--color-hover-surface)}
.host-multi-option input{width:16px;height:16px;accent-color:var(--color-primary)}
.host-number-input{display:grid;grid-template-columns:var(--form-number-control) minmax(0,1fr) var(--form-number-control);height:var(--form-control-height);border:var(--form-border-width) solid var(--form-border-default);border-radius:var(--form-input-radius);overflow:hidden;background:var(--form-control-background);transition:var(--form-transition)}
.host-number-input:focus-within{border-width:var(--form-border-focus-width);border-color:var(--form-border-focus);box-shadow:var(--focus-ring)}
.host-number-input .host-form-control{height:100%;border:0;border-left:var(--border-width-subtle) solid var(--border-default);border-right:var(--border-width-subtle) solid var(--border-default);border-radius:0;text-align:center;box-shadow:none}
.host-number-input .host-form-control:focus{border:0;box-shadow:none}
.host-number-input__button{border:0;background:transparent;color:var(--color-dark);display:grid;place-items:center;cursor:pointer}
.host-number-input__button:hover{background:var(--color-hover-surface);color:var(--color-primary)}
.host-number-input__button:disabled{color:var(--color-disabled-text);cursor:not-allowed}
.host-number-input__button svg{width:16px;height:16px}
.host-choice{display:flex;align-items:flex-start;gap:var(--space-8);font-family:var(--font-primary);font-size:var(--form-choice-size);font-weight:var(--font-weight-regular);color:var(--color-dark);line-height:1.4;cursor:pointer}
.host-choice input[type="checkbox"],.host-choice input[type="radio"]{width:var(--form-check-size);height:var(--form-check-size);margin:2px 0 0;accent-color:var(--color-primary);flex:0 0 auto}
.host-choice-group{display:grid;gap:var(--space-8);padding:0;margin:0;border:0}
.host-choice-group .host-form__label{padding:0;margin:0}
.host-switch{display:inline-flex;align-items:center;gap:var(--space-8);cursor:pointer;max-width:100%}
.host-switch input{position:absolute;opacity:0;pointer-events:none}
.host-switch__track{width:var(--form-switch-width);height:var(--form-switch-height);padding:var(--form-switch-padding);box-sizing:border-box;border-radius:var(--radius-pill);background:var(--color-neutral-300);display:flex;align-items:center;transition:background-color var(--motion-normal) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard)}
.host-switch__thumb{width:var(--form-switch-thumb);height:var(--form-switch-thumb);border-radius:var(--radius-circle);background:var(--color-white);box-shadow:var(--shadow-raised);transform:translateX(0);transition:transform var(--motion-normal) var(--ease-standard)}
.host-switch input:checked + .host-switch__track{background:var(--color-primary)}
.host-switch input:checked + .host-switch__track .host-switch__thumb{transform:translateX(calc(var(--form-switch-width) - var(--form-switch-thumb) - (var(--form-switch-padding) * 2)))}
.host-switch input:focus-visible + .host-switch__track{box-shadow:var(--focus-ring)}
.host-switch input:disabled + .host-switch__track{background:var(--color-neutral-200);opacity:.7}
.host-switch__label{font-family:var(--font-primary);font-size:var(--form-choice-size);color:var(--color-dark)}
.host-file-upload input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.host-file-upload__dropzone{min-height:var(--form-file-height);padding:var(--space-24);box-sizing:border-box;border:var(--form-file-border-width) dashed var(--form-file-border);border-radius:var(--form-input-radius);background:var(--form-control-background);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);text-align:center;cursor:pointer;transition:var(--transition-hover)}
.host-file-upload__dropzone:hover{border-color:var(--color-primary);background:var(--color-hover-surface)}
.host-file-upload__dropzone.is-dragover{border-color:var(--color-primary);background:var(--color-active-surface)}
.host-file-upload__icon{width:var(--icon-size-lg);height:var(--icon-size-lg);display:inline-flex}
.host-file-upload__title{font-family:var(--font-primary);font-size:var(--form-control-font-size);font-weight:var(--font-weight-medium);color:var(--color-dark)}
.host-file-upload__sub{font-family:var(--font-secondary);font-size:var(--form-help-size);color:var(--color-secondary-text)}
.host-file-upload__files{font-size:var(--form-help-size);color:var(--color-primary)}
.host-form-actions{display:flex;align-items:center;gap:var(--space-16);width:100%}
.host-form-actions--row{justify-content:flex-end;flex-wrap:wrap}
.host-form-actions--stack{flex-direction:column;align-items:stretch}
.host-form-actions--stack .host-button{width:100%}
.host-form--compact{gap:var(--space-8)}

@keyframes host-form-enter{from{opacity:0;transform:translateY(var(--motion-enter-offset)) scale(var(--motion-enter-scale))}to{opacity:1;transform:none}}

@media (max-width:767px){
  .host-form-control{height:var(--form-control-height-mobile)}
  .host-form-actions--row{gap:var(--space-12)}
  .host-form-actions--row .host-button{flex:1 1 auto}
  .host-file-upload__dropzone{min-height:var(--form-file-height-mobile);padding:var(--space-16)}
}
@media (prefers-reduced-motion:reduce){
  .host-form-control,.host-form__icon-button,.host-select-popover,.host-switch__track,.host-switch__thumb,.host-file-upload__dropzone{transition:none}
  .host-select-popover{animation:none}
}


/* HOSTREND INLINE LEAD-CAPTURE FORM — shared, semantic-token-driven component.
   Light uses a white field with Hostrend Blue action; Dark uses OLED black with a white action. */
.host-inline-lead-form {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--form-inline-cta-gap);
  width: min(100%, var(--form-inline-cta-max-width));
  min-width: 0;
  min-height: var(--form-inline-cta-height);
  padding: var(--form-inline-cta-padding);
  border: var(--form-border-width) solid var(--form-inline-cta-border);
  border-radius: var(--form-inline-cta-radius);
  background: var(--form-inline-cta-surface);
  box-shadow: var(--form-inline-cta-shadow);
  transition: border-color var(--form-transition), background-color var(--form-transition), box-shadow var(--form-transition);
}
.host-inline-lead-form::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid var(--form-inline-cta-highlight);
  border-radius: inherit;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.host-inline-lead-form:focus-within {
  border-color: var(--form-border-focus);
  box-shadow: var(--focus-ring);
}
.host-inline-lead-form__input.host-form-control {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: calc(var(--form-inline-cta-height) - (var(--form-inline-cta-padding) * 2));
  min-height: 40px;
  padding: 0 var(--form-control-padding-x);
  border: 0;
  border-radius: var(--form-inline-cta-inner-radius);
  outline: none;
  background: transparent;
  color: var(--form-inline-cta-text);
  font-family: var(--font-primary);
  font-size: var(--form-control-font-size);
  font-weight: var(--form-control-font-weight);
  line-height: var(--form-control-line);
  box-shadow: none;
}
.host-inline-lead-form__input.host-form-control::placeholder {
  color: var(--form-inline-cta-placeholder);
  opacity: 1;
}
.host-inline-lead-form__input.host-form-control:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}
.host-inline-lead-form .host-inline-lead-form__submit.host-button--primary {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 112px;
  min-height: calc(var(--form-inline-cta-height) - (var(--form-inline-cta-padding) * 2));
  padding-inline: var(--button-padding-sm);
  border-radius: var(--form-inline-cta-inner-radius);
  border-color: var(--form-inline-cta-button-bg);
  background: var(--form-inline-cta-button-bg);
  color: var(--form-inline-cta-button-text);
  box-shadow: none;
  font-size: var(--font-button-small);
  white-space: nowrap;
  transition: background-color var(--button-transition), color var(--button-transition), border-color var(--button-transition);
}
.host-inline-lead-form .host-inline-lead-form__submit.host-button--primary:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--form-inline-cta-button-hover-bg, #1A13E5);
  background: var(--form-inline-cta-button-hover-bg, #1A13E5);
  color: var(--form-inline-cta-button-hover-text, #FFFFFF);
}
.host-inline-lead-form .host-inline-lead-form__submit:focus-visible {
  outline: var(--ui-focus-width, 2px) solid var(--theme-focus, var(--color-primary));
  outline-offset: 2px;
}
.host-inline-lead-form__feedback {
  margin: var(--space-8) 0 0;
  color: var(--form-inline-cta-text);
  font-family: var(--font-primary);
  font-size: var(--form-help-size);
  line-height: var(--form-help-line);
}
@media (max-width: 379px) {
  .host-inline-lead-form {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }
  .host-inline-lead-form__input.host-form-control {
    flex: 0 0 auto;
    min-height: var(--form-control-height);
  }
  .host-inline-lead-form .host-inline-lead-form__submit.host-button--primary {
    width: 100%;
    min-width: 0;
  }
}