/* =========================
   Webform — unified styling
   ========================= */
.webform-submission-form {
  /* Theme variables (tweak here) */
  --field-width: 100%;
  --field-height: 50px;
  --radius: 30px;
  --focus-radius: 1px;
  --field-bg: #fff;
  --field-border-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
  --text-color: #111;
  --label-color: #222;
  --accent: #ff6347;          /* tomato */
  --timing: 0.3s;
}

/* Layout: label left, input right */
.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.webform-submission-form .js-form-item > label,
.webform-submission-form .form-item > label {
  width: 240px;
  text-align: right;
  margin: 0;
  color: var(--label-color);
  font-weight: 500;
  white-space: normal;
}

/* Fields: input/select/textarea get identical look */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="password"],
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  min-width: 0;
  height: var(--field-height);
  padding: 0 0.8em;
  border: none;
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--text-color);
  font-size: 0.95rem;

  /* subtle “box” + hidden underline (grows on focus) */
  box-shadow: var(--field-border-shadow);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;

  transition:
    border-radius 0.5s ease,
    background-size var(--timing) ease;
}

/* Focus: square corners + show underline */
.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  outline: none;
  border-radius: var(--focus-radius);
  background-size: 100% 2px;
}

/* Number fields: remove spinners */
.webform-submission-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.webform-submission-form input[type="number"]::-webkit-inner-spin-button,
.webform-submission-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Textarea sizing */
.webform-submission-form textarea {
  height: 80px;
  resize: vertical;
}

/* Submit button */
.webform-submission-form .form-actions {
  display: block;
  text-align: center;
  margin-top: 20px;
}
.webform-submission-form .form-actions input[type="submit"] {
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 25px;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.webform-submission-form .form-actions input[type="submit"]:hover {
  filter: brightness(0.9);
}

/* Autofill neutralization (keep our look) */
.webform-submission-form input:-webkit-autofill,
.webform-submission-form input:-webkit-autofill:hover,
.webform-submission-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--field-bg) inset !important,
    var(--field-border-shadow) !important;
  box-shadow:
    0 0 0 1000px var(--field-bg) inset !important,
    var(--field-border-shadow) !important;
  border-radius: var(--radius) !important;
  transition: background-color 9999s ease 0s !important;
}
.webform-submission-form input:-moz-autofill {
  -moz-text-fill-color: var(--text-color) !important;
  box-shadow:
    0 0 0 1000px var(--field-bg) inset !important,
    var(--field-border-shadow) !important;
  border-radius: var(--radius) !important;
}

/* Responsive: stack on small screens */
@media (max-width: 640px) {
  .webform-submission-form .js-form-item,
  .webform-submission-form .form-item {
    flex-direction: column;
    align-items: stretch;
  }
  .webform-submission-form .js-form-item > label,
  .webform-submission-form .form-item > label {
    width: auto;
    text-align: left;
    margin-bottom: 4px;
  }
  .webform-submission-form input,
  .webform-submission-form select,
  .webform-submission-form textarea {
    width: 100%;
  }
}









/* ===== FINAL OVERRIDES (place at the very end) ===== */

/* Strong specificity: hit Drupal core classes too */
.webform-submission-form .js-form-item
  :is(input.form-text,
      input.form-email,
      input[type="text"],
      input[type="email"],
      input[type="number"],
      input[type="tel"],
      select.form-select,
      select,
      textarea.form-textarea,
      textarea):not([type="submit"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--field-height, 50px) !important;



  padding: 0 0.8em !important;
  border: none !important;
  border-radius: var(--radius, 30px) !important;

  background: var(--field-bg, #fff) !important;
  color: var(--text-color, #111) !important;
  font-size: 0.95rem !important;

  /* unified box + hidden underline */
  box-shadow: var(--field-border-shadow, inset 0 0 0 2px rgba(0,0,0,0.06)) !important;
  background-image: linear-gradient(var(--accent, #ff6347), var(--accent, #ff6347)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0% 2px !important;

  appearance: none !important;      /* suppress theme/browser widgets */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  transition: border-radius .5s ease, background-size .3s ease !important;
}

/* Focus: same for all */
.webform-submission-form .js-form-item
  :is(input.form-text,
      input.form-email,
      input[type="text"],
      input[type="email"],
      input[type="number"],
      input[type="tel"],
      select.form-select,
      select,
      textarea.form-textarea,
      textarea):focus {
  outline: none !important;
  border-radius: var(--focus-radius, 1px) !important;
  background-size: 100% 2px !important;
}

/* Remove number spinners everywhere */
.webform-submission-form input[type="number"]::-webkit-inner-spin-button,
.webform-submission-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.webform-submission-form input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Autofill: keep our exact look */
.webform-submission-form input:-webkit-autofill,
.webform-submission-form input:-webkit-autofill:hover,
.webform-submission-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color, #111) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--field-bg, #fff) inset !important,
    var(--field-border-shadow, inset 0 0 0 2px rgba(0,0,0,0.06)) !important;
  box-shadow:
    0 0 0 1000px var(--field-bg, #fff) inset !important,
    var(--field-border-shadow, inset 0 0 0 2px rgba(0,0,0,0.06)) !important;
  border-radius: var(--radius, 30px) !important;
  transition: background-color 9999s ease 0s !important;
}
.webform-submission-form input:-moz-autofill {
  -moz-text-fill-color: var(--text-color, #111) !important;
  box-shadow:
    0 0 0 1000px var(--field-bg, #fff) inset !important,
    var(--field-border-shadow, inset 0 0 0 2px rgba(0,0,0,0.06)) !important;
  border-radius: var(--radius, 30px) !important;
}








/* Center each row (label + field) */
.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
  display: flex;
  align-items: center;     /* vertical centering for the row */
  gap: 12px;
  margin-bottom: 12px;
}

/* Make the label match input height and stay right-aligned */
.webform-submission-form .js-form-item > label,
.webform-submission-form .form-item > label {
  display: flex;                     /* turn label into a flex box */
  align-items: center;               /* center label text vertically */
  justify-content: flex-end;         /* keep text on the right edge */
  min-height: var(--field-height);   /* same vertical rhythm as inputs */
  width: 240px;                      /* your label column width */
  margin: 0 !important;              /* kill theme margins */
  padding: 0;
  text-align: right;
  line-height: 1;                    /* avoid baseline drift */
}

/* Keep the red star centered too */
.webform-submission-form .js-form-item > label .form-required,
.webform-submission-form .form-item > label .form-required {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25em;
}

/* Remove stray margins on fields that can push them off-center */
.webform-submission-form input,
.webform-submission-form select,
.webform-submission-form textarea {
  margin: 0 !important;
}

/* Textarea row: label should align to the top for multi-line fields */
.webform-submission-form .form-type-textarea {
  align-items: flex-start;           /* row alignment */
}
.webform-submission-form .form-type-textarea > label {
  min-height: 0;                     /* let it size naturally */
  align-items: flex-start;
  padding-top: 8px;                  /* small visual nudge */
}











/* Target all webforms; use the ID block below if you want only one form */
.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
  display: flex;
  align-items: center;
  gap: 12px;                 /* space between label and field */
  margin-bottom: 12px;
}

/* Label on the left, right-aligned for clean columns */
.webform-submission-form .js-form-item > label,
.webform-submission-form .form-item > label {
  width: 240px;              /* adjust to match your screenshot width */
  margin: 0;
  text-align: right;
  white-space: normal;       /* allow wrapping for long labels */
}

/* Make inputs grow to fill the remaining space */
.webform-submission-form .js-form-item input,
.webform-submission-form .js-form-item select,
.webform-submission-form .js-form-item textarea,
.webform-submission-form .form-item input,
.webform-submission-form .form-item select,
.webform-submission-form .form-item textarea {
  flex: 1 1 auto;
  max-width: none;       /* optional: keep them from getting too wide */
}

/* Keep action buttons unaffected */
.webform-submission-form .form-actions {
  display: block;
}

/* Radios/checkboxes: keep label on the left too */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  align-items: flex-start;
}

/* Mobile stacking so it still looks good on small screens */
@media (max-width: 640px) {
  .webform-submission-form .js-form-item,
  .webform-submission-form .form-item {
    flex-direction: column;
    align-items: stretch;
  }
  .webform-submission-form .js-form-item > label,
  .webform-submission-form .form-item > label {
    width: auto;
    text-align: left;
    margin-bottom: 4px;
  }
}









/* --- MOBILE FIX: label + kasti vahe täpselt 5px --- */
@media (max-width: 768px) {
  /* ridade vahe 5px (üle kirjutab varasema gap:12px) */
  .webform-submission-form .js-form-item,
  .webform-submission-form .form-item {
    gap: 5px !important;
    row-gap: 5px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 14px !important; /* väljadevaheline vahe */
  }

  /* kriitiline: ära lase labelil olla 50px kõrgune mobiilis */
  .webform-submission-form .js-form-item > label,
  .webform-submission-form .form-item > label {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: block !important;
    line-height: 1.2 !important;
    width: auto !important; /* tühistab 240px laiuse mobiilis */
  }

  /* väldi sisendite ülemist marginit */
  .webform-submission-form .js-form-item input,
  .webform-submission-form .js-form-item select,
  .webform-submission-form .js-form-item textarea,
  .webform-submission-form .form-item input,
  .webform-submission-form .form-item select,
  .webform-submission-form .form-item textarea {
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}




/* Ensure fields can stretch fully inside flex rows */
.webform-submission-form .js-form-item input,
.webform-submission-form .js-form-item select,
.webform-submission-form .js-form-item textarea,
.webform-submission-form .form-item input,
.webform-submission-form .form-item select,
.webform-submission-form .form-item textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}










/* ===== VANi / THEME OVERRIDE: textarea sama lai kui teised ===== */


/* KÕIK mis on labeli järel textarea reas peab venima 100% */
.webform-submission-form .form-item.form-type-textarea > :not(label),
.webform-submission-form .js-form-item.form-type-textarea > :not(label) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}