/**
 * Webform Submission Form Styles
 *
 * Scoped to .webform-submission-form.
 * Selectors verified against live HTML at /form/newsletter.
 */

/* ── Card wrapper ── */

.webform-submission-form {
  background-color: var(--ambience-150, #f1eeea);
  border-radius: 20px;
  margin: 80px auto;
  padding: 3rem 2.5rem;
  max-width: 560px;
  color: var(--trust);
}

/* ── Form title (webform-markup h2) ── */

.webform-submission-form .form-type-webform-markup h2 {
  text-align: center;
  font-size: var(--text-h2, 32px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--trust, #550a2d);
  line-height: 1.2;
  margin-block: 0 2rem;
}

/* ── Generic form-item spacing ── */

.webform-submission-form .form-item {
  margin-block: 0 1rem;
}

/* ── Newsletter tableselect ── */

.webform-submission-form .webform-tableselect {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-bosch-sans, 'Bosch Sans', sans-serif);
}

.webform-submission-form .webform-tableselect thead th {
  font-size: var(--text-paragraph-m, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--trust, #550a2d);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1.5px solid var(--ambience-500, #dbd4ce);
}

.webform-submission-form .webform-tableselect thead th:first-child {
  width: 44px;
}

.webform-submission-form .webform-tableselect tbody td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--ambience-300, #efebe7);
  font-size: var(--text-paragraph-m, 16px);
  color: var(--trust, #550a2d);
  vertical-align: middle;
}

.webform-submission-form .webform-tableselect tbody td:first-child {
  width: 44px;
}

.webform-submission-form .webform-tableselect tbody tr:last-child td {
  border-bottom: none;
}

.webform-submission-form .webform-tableselect input.tableselect.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--trust, #550a2d);
  border-radius: 3px;
  background-color: var(--white, #ffffff);
  cursor: pointer;
  position: relative;
  display: block;
  transition: background-color 0.15s ease;
}

.webform-submission-form .webform-tableselect input.tableselect.form-checkbox:checked {
  background-color: var(--trust, #550a2d);
}

.webform-submission-form .webform-tableselect input.tableselect.form-checkbox:checked::after {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 1px;
  width: 7px;
  height: 11px;
  border: 2px solid var(--white, #ffffff);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── Descriptions ── */
.webform-element-description {
  margin-bottom: var(--spacing-200);
  font-size: var(--text-paragraph-l);
}

/* ── Processed Text / HTML Element ── */
.webform-type-processed-text {
  margin-bottom: var(--spacing-200);
  font-size: var(--text-paragraph-l);
}

/* ── Radios (Geschlecht) ── */

.webform-submission-form .radios--wrapper {
  border: none;
  border-top: 1.5px solid var(--ambience-500, #dbd4ce);
  padding: 0;
  padding-block-start: 1.5rem;
  margin: 1.5rem 0 1rem;
}

.webform-submission-form .radios--wrapper legend {
  display: none;
}

.webform-submission-form .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.webform-submission-form .form-type-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0;
}

.webform-submission-form input.form-radio {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--trust, #550a2d);
  border-radius: 50%;
  background-color: var(--white, #ffffff);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
}

.webform-submission-form input.form-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--trust, #550a2d);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.webform-submission-form input.form-radio:checked::after {
  opacity: 1;
}

.webform-submission-form .form-type-radio label.option {
  font-size: var(--text-paragraph-m, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--trust, #550a2d);
  cursor: pointer;
  margin: 0;
}

/* ── Text / email inputs ── */

.webform-submission-form .form-type-textfield,
.webform-submission-form .form-type-email,
.webform-submission-form .form-type-tel {
  position: relative;
  margin-block-end: 0.75rem;
}

/* Hide label visually — placeholder replaces it */
.webform-submission-form .form-type-textfield > label,
.webform-submission-form .form-type-email > label,
.webform-submission-form .form-type-tel > label {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-paragraph-m, 16px);
  font-weight: 400;
  color: var(--ambience-700, #998c80);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 2rem);
  transition: top 0.12s ease, transform 0.12s ease, font-size 0.12s ease;
  z-index: 1;
}

/* Float label up when focused or when placeholder is hidden (= user has typed a value).
   Requires js/webform.js to set placeholder=" " on inputs that have none. */
.webform-submission-form .form-type-textfield:has(input:focus) > label,
.webform-submission-form .form-type-email:has(input:focus) > label,
.webform-submission-form .form-type-tel:has(input:focus) > label,
.webform-submission-form .form-type-textfield:has(input:not(:placeholder-shown)) > label,
.webform-submission-form .form-type-email:has(input:not(:placeholder-shown)) > label,
.webform-submission-form .form-type-tel:has(input:not(:placeholder-shown)) > label {
  top: 10px;
  transform: none;
  font-size: 11px;
}

.webform-submission-form input.form-text,
.webform-submission-form input.form-email,
.webform-submission-form input.form-tel {
  display: block;
  width: 100%;
  height: 56px;
  padding-block-start: 18px;
  padding-block-end: 6px;
  padding-inline: 1rem;
  padding-inline-start: 12px;
  background-color: var(--white, #ffffff);
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: var(--font-bosch-sans, 'Bosch Sans', sans-serif);
  font-size: var(--text-paragraph-m, 16px);
  color: var(--trust, #550a2d);
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.webform-submission-form input.form-text:hover,
.webform-submission-form input.form-email:hover,
.webform-submission-form input.form-tel:hover {
  background-color: var(--ambience-100, #f7f5f3);
}

.webform-submission-form input.form-text:focus,
.webform-submission-form input.form-email:focus,
.webform-submission-form input.form-tel:focus {
  outline: none;
  background-color: var(--white, #ffffff);
  border-color: var(--accent, #fa263a);
}

/* ── Checkbox (Nutzungsbedingungen) ── */

.webform-submission-form .checkboxes--wrapper {
  border: none;
  border-top: 1.5px solid var(--ambience-500, #dbd4ce);
  border-bottom: 1.5px solid var(--ambience-500, #dbd4ce);
  padding-block: 1.5rem;
  margin-block: 1.5rem;
}

.webform-submission-form .checkboxes--wrapper > legend {
  display: none;
}

.webform-submission-form .checkboxes--wrapper .form-type-checkbox label.option::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  background-image: url(../../images/icons/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

.webform-submission-form .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block: 0;
}

.webform-submission-form input.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--trust, #550a2d);
  border-radius: 3px;
  background-color: var(--white, #ffffff);
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease;
}

.webform-submission-form input.form-checkbox:checked {
  background-color: var(--trust, #550a2d);
}

.webform-submission-form input.form-checkbox:checked::after {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 1px;
  width: 8px;
  height: 13px;
  border: 2.5px solid var(--white, #ffffff);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.webform-submission-form .form-type-checkbox label.option {
  font-size: var(--text-paragraph-l, 16px);
  color: var(--trust, #550a2d);
  cursor: pointer;
  line-height: 1.4;
}

/* ── Submit button ── */

.webform-submission-form .form-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin-block: 1.5rem 0;
}

.webform-submission-form input.webform-button--submit {
  appearance: none;
  display: block;
  width: 100%;
  height: 60px;
  padding-inline: 2rem;
  background-color: var(--attitude, #ffa0fa);
  border: none;
  border-radius: 1000px;
  font-family: var(--font-bosch-sans, 'Bosch Sans', sans-serif);
  font-size: var(--text-paragraph-l, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--trust, #550a2d);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background-color 0.2s ease;
}

.webform-submission-form input.webform-button--submit:hover {
  background-color: var(--attitude-500, #cc80c8);
}

.webform-submission-form input.webform-button--submit:focus-visible {
  outline: 4px solid var(--accent, #fa263a);
  outline-offset: 2px;
}

/* ── Error states ── */

.webform-submission-form .form-item--error input.form-text,
.webform-submission-form .form-item--error input.form-email {
  border-color: var(--error-400, #f04155);
}

.webform-submission-form .form-item--error-message {
  font-size: 13px;
  color: var(--error-600, #a82e3c);
  margin-top: 0.25rem;
}