.webform-submission-form {
  --max: 1100px;
  --pad: 20px;
  --gap: 20px;

  --bg: #ffffff;
  --text: #111;
  --muted: #6b6b6b;
  --border: #e7e7e7;
  --border-hover: #d7d7d7;

  --radius: 10px;
  --control-h: 42px;

  max-width: var(--max);
  margin: 52px auto;
  padding: 0 var(--pad);
  color: var(--text);
}

.webform-submission-form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: 0.2px;
}

.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="number"],
.webform-submission-form select,
.webform-submission-form textarea,
.webform-submission-form .form-control {
  width: 100%;
  height: var(--control-h);
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.webform-submission-form textarea,
.webform-submission-form textarea.form-control {
  height: auto;
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus,
.webform-submission-form .form-control:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08);
}

.webform-submission-form input:focus-visible,
.webform-submission-form select:focus-visible,
.webform-submission-form textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.10);
}

.form-required::after {
  content: "";
  display: none;
}

.webform-submission-form fieldset {
  border: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.webform-submission-form legend {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

.webform-submission-form .form-item {
  margin: 0;            
  flex: 1 1 100%;
  min-width: 0;        
}

.webform-submission-form .description,
.webform-submission-form .help-block {
  font-size: 11px;
  color: #9a9a9a;
  margin-top: 6px;
  line-height: 1.35;
}

.webform-submission-form .js-form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.webform-submission-form input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.webform-submission-form .js-form-type-checkbox label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.webform-submission-form input[type="file"] {
  height: auto;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.webform-submission-form .js-form-item-field-keimeno-paroysiasis,
.webform-submission-form .js-form-item-field-etiketes-haraktirismoy,
.webform-submission-form .js-form-item-field-eikona-paroysiasis {
  flex-basis: 100% !important;
}

.webform-submission-form .form-actions {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.webform-submission-form .form-actions input[type="submit"],
.webform-submission-form .form-actions .btn {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.webform-submission-form .form-actions input[type="submit"]:hover,
.webform-submission-form .form-actions .btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.webform-submission-form,
.webform-submission-form * {
  box-sizing: border-box;
}


/* Desktop */
@media (min-width: 900px) {
  .webform-submission-form .js-form-item-field-onoma,
  .webform-submission-form .js-form-item-field-eponymo,
  .webform-submission-form .js-form-item-field-tilefono,
  .webform-submission-form .js-form-item-field-email {
    flex: 0 0 calc((100% - (3 * var(--gap))) / 4);
  }

  .webform-submission-form .js-form-item-field-katigoria-epiheirisis,
  .webform-submission-form .js-form-item-field-titlos,
  .webform-submission-form .js-form-item-field-ypotitlos,
  .webform-submission-form .js-form-item-field-tilefono-epiheirisis,
  .webform-submission-form .js-form-item-field-email-epiheirisis,
  .webform-submission-form .js-form-item-field-website,
  .webform-submission-form .js-form-item-field-linkedin,
  .webform-submission-form .js-form-item-field-facebook,
  .webform-submission-form .js-form-item-field-twiter {
    flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
  }

  .webform-submission-form .js-form-item-field-location {
    flex: 0 0 calc((100% - var(--gap)) * 0.66);
  }
  .webform-submission-form .js-form-item-field-location-complementary {
    flex: 0 0 calc((100% - var(--gap)) * 0.34);
  }

  .webform-submission-form .js-form-item-field-location-locality,
  .webform-submission-form .js-form-item-field-location-administrative-area-level-1,
  .webform-submission-form .js-form-item-field-location-country {
    flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
  }

  .webform-submission-form .js-form-item-field-location-lat,
  .webform-submission-form .js-form-item-field-location-lng {
    flex: 0 0 calc((100% - var(--gap)) / 2);
  }

  .webform-submission-form .js-form-item-field-eikona1,
  .webform-submission-form .js-form-item-field-eikona2,
  .webform-submission-form .js-form-item-field-eikona3,
  .webform-submission-form .js-form-item-field-eikona4,
  .webform-submission-form .js-form-item-field-eikona5 {
    flex: 0 0 calc((100% - (4 * var(--gap))) / 5);
  }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
  .webform-submission-form .js-form-item-field-onoma,
  .webform-submission-form .js-form-item-field-eponymo,
  .webform-submission-form .js-form-item-field-tilefono,
  .webform-submission-form .js-form-item-field-email,
  .webform-submission-form .js-form-item-field-katigoria-epiheirisis,
  .webform-submission-form .js-form-item-field-titlos,
  .webform-submission-form .js-form-item-field-ypotitlos,
  .webform-submission-form .js-form-item-field-tilefono-epiheirisis,
  .webform-submission-form .js-form-item-field-email-epiheirisis,
  .webform-submission-form .js-form-item-field-website,
  .webform-submission-form .js-form-item-field-linkedin,
  .webform-submission-form .js-form-item-field-facebook,
  .webform-submission-form .js-form-item-field-twiter,
  .webform-submission-form .js-form-item-field-location,
  .webform-submission-form .js-form-item-field-location-complementary,
  .webform-submission-form .js-form-item-field-location-locality,
  .webform-submission-form .js-form-item-field-location-administrative-area-level-1,
  .webform-submission-form .js-form-item-field-location-country,
  .webform-submission-form .js-form-item-field-location-lat,
  .webform-submission-form .js-form-item-field-location-lng {
    flex: 0 0 calc((100% - var(--gap)) / 2);
  }

  /* Gallery: 3 columns on tablet */
  .webform-submission-form .js-form-item-field-eikona1,
  .webform-submission-form .js-form-item-field-eikona2,
  .webform-submission-form .js-form-item-field-eikona3,
  .webform-submission-form .js-form-item-field-eikona4,
  .webform-submission-form .js-form-item-field-eikona5 {
    flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
  }
}

/* Mobile */
@media (max-width: 599px) {
  .webform-submission-form {
    --pad: 15px;
    --gap: 15px;
    margin: 32px auto;
  }

  .webform-submission-form legend {
    font-size: 10px;
  }

  .webform-submission-form .js-form-item-field-eikona1,
  .webform-submission-form .js-form-item-field-eikona2,
  .webform-submission-form .js-form-item-field-eikona3,
  .webform-submission-form .js-form-item-field-eikona4,
  .webform-submission-form .js-form-item-field-eikona5 {
    flex: 0 0 calc((100% - var(--gap)) / 2);
  }
}

.custom-container-class {
  display: flex;
  gap: 20px;
  margin-top:20px;
  padding-top:20px;
}