/* ==========================================================================
   _forms.css - canonical Form component styles
   Split from _components.css in phase 2 (see scripts/split-components.mjs).
   Loaded once in _document.tsx after base/layout files and before
   page-specific CSS.
   ========================================================================== */

.form {
  margin-bottom: 45px;
}

.form > div {
  width: 100%;
}

.form label {
  display: block;
  padding: 0 20px;
  margin-bottom: 10px;
  font-family: AvenirNext-Regular;
  font-size: 1.25rem;
  color: #282828;
  letter-spacing: 0;
}

.form input {
  appearance: none;
  border: 0;
  border-bottom: 1px solid transparent;
  width: 100%;
  height: 50px;
  outline: 0;
  padding: 0 15px;
  font-size: 15px;
  line-height: 20px;
  color: #282828;
  font-family: inherit;
  text-transform: capitalize;
}

.form input {
  display: block;
  width: 100%;
  border: 1px solid #cccccc;
  height: 55px;
  border-radius: 8px;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: initial;
}

.form .input-group span {
  color: black;
  z-index: 1;
  pointer-events: none;
  font-family: 'AvenirNext-Medium', sans-serif;
  font-size: 15px;
  line-height: 20px;
}

.form p {
  grid-column: 1/3;
  margin-bottom: 45px;
  font-size: 1rem;
}

.form p {
  font-family: AvenirNext-Medium;
  font-size: clamp(0.75rem, 0.5913rem + 0.7937vw, 1.0625rem);
  color: #737373;
  text-align: center;
}

.form input[type='file'] {
  display: none;
}

.form select {
  display: block;
  width: 100%;
  border: 1px solid #cccccc;
  height: 55px;
  border-radius: 8px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: AvenirNext-DemiBold;
  font-size: 18px;
  color: #282828;
  letter-spacing: 0;
  line-height: 20px;
}

.form .upload-btn {
  display: block;
  width: 100%;
  border: 1px solid #cccccc;
  height: 75px;
  padding-left: 20px;
  padding-right: 20px;
}

.form .ui-PlayButtonGreen {
  width: 100%;
}