@charset "UTF-8";
.form {
  --form-gap: 1em;
  --form-error-color: var(--color-error);
  --form-success-color: var(--color-success);
  --form-transition: all 0.2s ease-in-out;
  --form-column-min-width: 200px;
  --form-input-padding-vertical: 0.75em;
  --form-input-padding-horizontal: 1em;
  --form-input-padding: var(--form-input-padding-vertical) var(--form-input-padding-horizontal);
  --form-input-font-size: var(--font-size-16);
  --form-input-background-color: var(--color-light);
  --form-input-font-weight: var(--font-weight-regular);
  --form-input-text-color: var(--font-color);
  --form-input-border: 1px solid var(--color-border);
  --form-input-border-active: 1px solid var(--color-primary);
  --form-input-border-radius: var(--border-radius-smaller);
  --form-input-box-shadow: none;
  --form-input-font-family: var(--font-heading);
  --form-input-box-shadow-focus: none;
  --form-textarea-min-height: 6em;
  --form-textarea-line-height: var(--line-height);
  --form-textarea-arrow-icon: 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' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --form-choice-size: 1.125em;
  --form-choice-border-radius: var(--border-radius-smaller);
  --form-choice-border: 1px solid var(--color-border);
  --form-choice-border-active: 1px solid var(--color-primary);
  --form-choice-background-color: var(--color-light);
  --form-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --form-choice-icon-color: var(--color-primary);
  --form-label-font-size: var(--font-size-16);
  --form-label-text-color: var(--font-color);
  --form-label-required-color: var(--color-error);
  --form-submit-button-position: flex-end;
  --form-submit-button-background-color: var(--color-primary);
  --form-submit-button-text-color: var(--color-white);
  --form-submit-button-border: none;
  --form-submit-button-border-radius: var(--border-radius);
  --form-submit-button-padding: 0.75em 1.5em;
  --form-submit-button-font-size: var(--font-size-18);
  --form-submit-button-background-color-hover: var(--color-secondary);
  --form-submit-button-text-color-hover: var(--color-white);
  --form-submit-button-indicator-size: 0;
  --form-response-padding: 0.75em 1em;
  --form-response-border-radius: var(--border-radius);
  --form-response-font-size: var(--font-size-16);
  --form-response-background-color-success: var(--color-success);
  --form-response-text-color-success: var(--color-white);
  --form-response-background-color-error: var(--color-error);
  --form-response-text-color-error: var(--color-white);
  --form-notice-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%231d1d1b' stroke-linecap='round' stroke-linejoin='round' stroke-width='5' d='m38.06 10.25 21.07 36.49c2.69 4.67-.67 10.5-6.06 10.5H10.93c-5.39 0-8.76-5.83-6.06-10.5l21.07-36.49c2.69-4.67 9.43-4.67 12.12 0ZM32 22v15.67m0 8.77V47' /%3E%3C/svg%3E");
  --form-notice-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%231d1d1b' stroke-linecap='round' stroke-linejoin='round' stroke-width='5' d='M44.31 21.67c-11.96 8.57-18.29 20.67-18.29 20.67s-3.43-3.96-6.33-6.14M4 32c0 15.46 12.54 28 28 28s28-12.54 28-28S47.46 4 32 4 4 16.54 4 32Z' /%3E%3C/svg%3E");
  display: grid;
  gap: var(--form-gap);
  position: relative;
  /* ------------------------------------------------------------------ */
  /* Řádky a sloupce                                                    */
  /* ------------------------------------------------------------------ */
}
.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--form-gap);
  z-index: 2;
}
.form__column {
  min-width: var(--form-column-min-width);
}
.form__column--flex-1 {
  flex: 1;
}
.form__column--flex-2 {
  flex: 2;
}
.form__item {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  width: 100%;
}
.form {
  /* ------------------------------------------------------------------ */
  /* Label                                                              */
  /* ------------------------------------------------------------------ */
}
.form__label {
  font-size: var(--form-label-font-size);
  color: var(--form-label-text-color);
  cursor: pointer;
}
.form__label-required {
  color: var(--form-label-required-color);
  margin-left: 0.125em;
}
.form--float-labels .form__label {
  position: absolute;
  left: var(--form-input-padding-horizontal);
  top: var(--form-input-padding-vertical);
  background-color: transparent;
  padding: 0 0;
  transition: var(--form-transition);
  pointer-events: none;
  z-index: 5;
}
.form--float-labels .form__input::placeholder, .form--float-labels .form__textarea::placeholder, .form--float-labels .form__select::placeholder {
  color: transparent;
}
.form__item--active .form__label, .form__item--filled .form__label {
  top: -1em;
  left: 0;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.2em 0.4em;
  font-size: var(--font-size-12);
  border-radius: var(--border-radius-smaller);
}
.form {
  /* ------------------------------------------------------------------ */
  /* Inputy                                                             */
  /* ------------------------------------------------------------------ */
}
.form__input, .form__textarea, .form__select {
  padding: var(--form-input-padding);
  padding-right: calc(var(--form-input-padding-horizontal) + 1.5em);
  font-size: var(--form-input-font-size);
  background: var(--form-input-background-color);
  color: var(--form-input-text-color);
  border: var(--form-input-border);
  border-radius: var(--form-input-border-radius);
  width: 100%;
  transition: var(--form-transition, var(--transition));
  display: block;
  appearance: none;
  box-shadow: var(--form-input-box-shadow);
  font-family: var(--form-input-font-family);
  font-weight: var(--form-input-font-weight);
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border: var(--form-input-border-active);
  box-shadow: var(--form-input-box-shadow-focus);
}
.form__input:disabled, .form__textarea:disabled, .form__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form__textarea {
  resize: vertical;
  min-height: var(--form-textarea-min-height);
  line-height: var(--form-textarea-line-height);
}
.form__select {
  background-image: var(--form-textarea-arrow-icon);
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
  cursor: pointer;
}
.form__select + .form__input-notice {
  right: 2em;
}
.form {
  /* ------------------------------------------------------------------ */
  /* Checkbox, radio, acceptance                                        */
  /* ------------------------------------------------------------------ */
}
.form__checkbox-label, .form__radio-label, .form__acceptance-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: var(--form-input-font-size);
  cursor: pointer;
  line-height: 1.4;
  position: relative;
}
.form__checkbox-label::before, .form__radio-label::before, .form__acceptance-label::before {
  content: "";
  width: var(--form-choice-size);
  height: var(--form-choice-size);
  flex-shrink: 0;
  border: var(--form-choice-border);
  border-radius: var(--form-choice-border-radius);
  background-color: var(--form-choice-background-color);
}
.form__checkbox-label::after, .form__radio-label::after, .form__acceptance-label::after {
  content: "";
  position: absolute;
  width: var(--form-choice-size);
  height: var(--form-choice-size);
  flex-shrink: 0;
  background-color: var(--color-primary);
  opacity: 0;
  transition: opacity var(--form-transition);
  z-index: 2;
  mask: var(--form-choice-icon) center/75% auto no-repeat;
}
.form__checkbox-label:has(input:checked)::before, .form__radio-label:has(input:checked)::before, .form__acceptance-label:has(input:checked)::before {
  border: var(--form-choice-border-active);
}
.form__checkbox-label:has(input:checked)::after, .form__radio-label:has(input:checked)::after, .form__acceptance-label:has(input:checked)::after {
  opacity: 1;
}
.form__checkbox-label .form__input-notice, .form__radio-label .form__input-notice, .form__acceptance-label .form__input-notice {
  right: 0;
  top: 0.25em;
}
.form__radio-label::before {
  border-radius: 50%;
}
.form__checkbox, .form__radio, .form__acceptance {
  display: none;
}
.form__checkbox-group, .form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.form {
  /* ------------------------------------------------------------------ */
  /* File input                                                           */
  /* ------------------------------------------------------------------ */
}
.form__file {
  font-size: var(--form-input-font-size);
  cursor: pointer;
  width: 100%;
}
.form__file::file-selector-button {
  padding: 0.375em 0.875em;
  border: var(--form-input-border);
  border-radius: var(--form-input-border-radius);
  background: var(--form-input-background-color);
  color: var(--form-input-text-color);
  cursor: pointer;
  margin-right: 0.75em;
  transition: var(--form-transition);
}
.form__file::file-selector-button:hover {
  background: #f3f4f6;
}
.form {
  /* ------------------------------------------------------------------ */
  /* Honeypot — vždy skrytý                                               */
  /* ------------------------------------------------------------------ */
}
.form__special-field {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  pointer-events: none;
}
.form {
  /* ------------------------------------------------------------------ */
  /* Submit tlačítko                                                    */
  /* ------------------------------------------------------------------ */
}
.form__submit-wrapper {
  display: flex;
  justify-content: var(--form-submit-button-position);
  z-index: 2;
}
.form__submit-button {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--form-submit-button-padding);
  background-color: var(--form-submit-button-background-color);
  color: var(--form-submit-button-text-color);
  border: var(--form-submit-button-border);
  border-radius: var(--form-submit-button-border-radius);
  font-size: var(--form-submit-button-font-size);
  cursor: pointer;
  transition: var(--form-transition);
  position: relative;
}
.form__submit-button:hover:not(:disabled) {
  --form-submit-button-background-color: var(--form-submit-button-background-color-hover);
  --form-submit-button-text-color: var(--form-submit-button-text-color-hover);
}
.form__submit-button--blocked {
  pointer-events: none;
  opacity: 0.5;
}
.form__submit-button--loading {
  --form-submit-button-indicator-size: 1em;
  --form-submit-button-indicator-margin-right: 0.5em;
  pointer-events: none;
  opacity: 0.75;
}
.form__submit-button-indicator {
  width: var(--form-submit-button-indicator-size);
  height: 1em;
  mask: var(--icon-loading, var(--icon-loading-default)) center/contain no-repeat;
  background-color: var(--form-submit-button-text-color);
  animation: form-spin 1s linear infinite;
  transition: var(--transition, all 0.2s ease-in-out);
  margin-right: var(--form-submit-button-indicator-margin-right, 0);
}
.form {
  /* ------------------------------------------------------------------ */
  /* Stavová zpráva ([response] tag)                                    */
  /* ------------------------------------------------------------------ */
}
.form__response {
  padding: var(--form-response-padding);
  border-radius: var(--form-response-border-radius);
  font-size: var(--form-response-font-size);
  line-height: var(--line-height);
  transition: var(--form-transition);
  text-align: center;
  z-index: 2;
}
.form__response:empty {
  display: none;
}
.form__response--success {
  background: var(--form-response-background-color-success);
  color: var(--form-response-text-color-success);
}
.form__response--error {
  background: var(--form-response-background-color-error);
  color: var(--form-response-text-color-error);
}
.form {
  /* ------------------------------------------------------------------ */
  /* Validace polí formuláře                                            */
  /* ------------------------------------------------------------------ */
}
.form__input-notice {
  position: absolute;
  right: calc(var(--form-input-padding-horizontal) - 0.33em);
  top: var(--form-input-padding-vertical);
  z-index: 10;
}
.form__input-notice--invalid {
  --form-notice-icon: var(--form-notice-icon-invalid);
  --form-notice-color: var(--form-error-color);
}
.form__input-notice--valid {
  --form-notice-icon: var(--form-notice-icon-valid);
  --form-notice-color: var(--form-success-color);
}
.form__input-notice:hover .form__input-notice-tooltip {
  opacity: 1;
  margin-bottom: 0;
}
.form__input-notice-icon {
  width: 1em;
  height: 1em;
  mask: var(--form-notice-icon) center/contain no-repeat;
  background-color: var(--form-notice-color);
  display: block;
}
.form__input-notice-tooltip {
  background-color: var(--form-notice-color);
  color: var(--color-white);
  padding: 0.5em 0.6em;
  border-radius: var(--border-radius-smaller);
  position: absolute;
  bottom: calc(100% + 0.5em);
  right: 50%;
  transform: translate(50%, 0.5em);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--form-transition);
  font-size: var(--font-size-12);
  margin-bottom: -0.5em;
  display: block;
  line-height: 1;
}
.form__input-notice-tooltip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  background-color: var(--form-notice-color);
  z-index: 0;
}

/* ---------------------------------------------------------------------- */
/* Animace spinneru                                                       */
/* ---------------------------------------------------------------------- */
@keyframes form-spin {
  to {
    transform: rotate(360deg);
  }
}