/* ===== UPPC Contact webform ===== */
.webform-submission-contact-form {
  position: relative;
  padding: 34px 34px 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
  border-top: 5px solid #7d0a23;
  font-family: inherit;
  box-sizing: border-box;
}
.webform-submission-contact-form * { box-sizing: border-box; }
/* small heading inside the card */
.webform-submission-contact-form::before {
  content: "Send us a message";
  display: block;
  margin: 0 0 22px; padding: 0 0 12px;
  font-size: 22px; font-weight: 800; color: #1e293b;
  background: linear-gradient(#7d0a23, #7d0a23) left bottom / 50px 3px no-repeat;
}

/* spacing between fields */
.webform-submission-contact-form .form-item,
.webform-submission-contact-form .js-form-item { margin: 0 0 16px !important; }
.webform-submission-contact-form .webform-flexbox { margin: 0 -8px !important; }
.webform-submission-contact-form .webform-flex--container { margin: 0 8px !important; }

/* labels (if shown) */
.webform-submission-contact-form label {
  display: block; margin: 0 0 6px;
  font-size: 13px; font-weight: 700; color: #1e293b;
}

/* inputs */
.webform-submission-contact-form input[type="text"],
.webform-submission-contact-form input[type="email"],
.webform-submission-contact-form input[type="tel"],
.webform-submission-contact-form input[type="number"],
.webform-submission-contact-form select,
.webform-submission-contact-form textarea {
  width: 100% !important;
  height: 52px;
  padding: 0 16px 0 46px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background-color: #f8fafc !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: 18px 18px !important;
  font-size: 15px; color: #1e293b;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.webform-submission-contact-form textarea {
  height: 210px !important; min-height: 170px;
  font-family: inherit;
  padding: 14px 16px 14px 46px !important;
  background-position: 16px 16px !important;
  resize: vertical; line-height: 1.6;
}
.webform-submission-contact-form input::placeholder,
.webform-submission-contact-form textarea::placeholder { color: #94a3b8; opacity: 1; }
.webform-submission-contact-form input:focus,
.webform-submission-contact-form select:focus,
.webform-submission-contact-form textarea:focus {
  outline: none;
  border-color: #7d0a23 !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(125, 10, 35, .10) !important;
}

/* small icons inside the fields */
.webform-submission-contact-form input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d0a23' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
}
.webform-submission-contact-form input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d0a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.webform-submission-contact-form input[type="tel"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d0a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}
.webform-submission-contact-form input[name*="subject"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d0a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
}
.webform-submission-contact-form textarea {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d0a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
}

/* submit button */
.webform-submission-contact-form .form-actions { margin: 8px 0 0 !important; }
.webform-submission-contact-form .form-actions .form-submit,
.webform-submission-contact-form .webform-button--submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 200px; height: 52px; padding: 0 30px !important;
  border: 0 !important; border-radius: 12px !important;
  background: #7d0a23 !important; color: #fff !important;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  cursor: pointer; box-shadow: 0 10px 22px rgba(125, 10, 35, .25);
  transition: background .2s, transform .2s;
}
.webform-submission-contact-form .form-actions .form-submit:hover,
.webform-submission-contact-form .webform-button--submit:hover { background: #5c0619 !important; transform: translateY(-2px); }
/* hide the theme's little dash before the button text */
.webform-submission-contact-form .form-actions::before,
.webform-submission-contact-form .form-submit::before,
.webform-submission-contact-form .form-actions .btn-theme::before { display: none !important; }

/* error and success messages */
.webform-submission-contact-form .form-item--error-message,
.webform-submission-contact-form .error { color: #b91c1c; font-size: 13px; }
.webform-submission-contact-form input.error,
.webform-submission-contact-form textarea.error { border-color: #b91c1c !important; }

/* phones */
@media (max-width: 767px) {
  .webform-submission-contact-form { padding: 24px 20px 22px; }
  .webform-submission-contact-form .webform-flexbox { display: block !important; margin: 0 !important; }
  .webform-submission-contact-form .webform-flex--container { margin: 0 !important; }
  .webform-submission-contact-form .form-actions .form-submit { width: 100%; }
}
/* ===== balance with the picture card on the right ===== */
@media (min-width: 768px) {
  .webform-submission-contact-form {
    aspect-ratio: 480 / 540;          /* same shape as the advert picture */
    display: flex;
    flex-direction: column;
  }
  /* the message box grows to fill the space */
  .webform-submission-contact-form .form-item:has(textarea),
  .webform-submission-contact-form .js-form-item:has(textarea) {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px !important;
  }
  .webform-submission-contact-form textarea {
    flex: 1;
    height: auto !important;
    min-height: 140px;
  }
  /* button sits at the bottom of the card */
  .webform-submission-contact-form .form-actions { margin-top: auto !important; }
}
/* same look for the message box text as the other fields */
.webform-submission-contact-form textarea { font-size: 15px !important; }