/**
 * Styles for the public access code entry form.
 * Mirrors the site's #inquiry form panel (e.g. Au Naturel Spa "Connect With Us").
 */

.path-access-code .layout-content {
  padding: 0;
}

.path-access-code .access-code-page:not(.has-header-images) {
  padding-top: 60px;
}

.path-access-code .header-images {
  margin-bottom: 0;
}

#access-code-entry {
  margin: 0;
  padding: 60px 30px;
  color: var(--white, #ffffff);
  background-color: var(--dark-grey, #2e2e2e);
  text-align: center;
}

#access-code-entry h2 {
  position: relative;
  margin-bottom: 25px;
  padding-bottom: 30px;
  font-family: var(--secondary-font-family, ivyjournal, serif);
  font-weight: var(--secondary-font-weight, 400);
  font-size: var(--h2, 24px);
  line-height: var(--h2-line-height, 35px);
  color: var(--white, #ffffff);
}

#access-code-entry h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 57px;
  height: 1px;
  background-color: var(--red-line, #e03751);
}

#access-code-entry .access-code-entry__intro {
  max-width: 680px;
  margin: 0 auto 20px;
  font-size: var(--p-size, 16px);
  line-height: var(--p-line-height, 28px);
}

#access-code-entry .access-code-entry__intro a,
#access-code-entry .access-code-entry__granted a {
  color: var(--white, #ffffff);
  text-decoration: underline;
}

#access-code-entry .access-code-entry__granted {
  max-width: 680px;
  margin: 0 auto;
  font-size: var(--p-size, 16px);
  line-height: var(--p-line-height, 28px);
}

#access-code-entry form {
  margin: 0 auto;
  width: 100%;
  text-align: left;
}

#access-code-entry form .form-item,
#access-code-entry form .form-actions {
  max-width: 352px;
  margin-left: auto;
  margin-right: auto;
}

#access-code-entry .form-item {
  position: relative;
  margin: 20px auto 0;
}

#access-code-entry .form-item label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing, 0.05em);
  text-transform: uppercase;
  color: var(--white, #ffffff);
}

#access-code-entry .form-item input[type="text"] {
  display: block;
  padding: 10px;
  width: 100%;
  max-width: 100%;
  color: var(--black, #000000);
  background-color: var(--white, #ffffff);
  border: none;
  border-radius: 0;
  font-family: var(--primary-font-family, europa, sans-serif);
  font-size: var(--p-size, 16px);
  box-sizing: border-box;
}

#access-code-entry .form-item input[type="text"]:focus {
  outline: 2px solid var(--red-line, #e03751);
  outline-offset: 0;
}

#access-code-entry .form-item .error,
#access-code-entry .form-item input.error {
  background-color: var(--red, #a43143);
  color: var(--white, #ffffff);
}

#access-code-entry .form-item .form-item__error-message,
#access-code-entry .form-item .form-item--error-message {
  margin-top: 8px;
  font-size: var(--p-size-sm, 14px);
  color: var(--white, #ffffff);
}

#access-code-entry .form-actions {
  text-align: center;
}

#access-code-entry .form-actions input[type="submit"],
#access-code-entry .form-actions .button {
  cursor: pointer;
  display: inline-block;
  max-width: 147px;
  width: 100%;
  margin-top: 20px;
  padding: 9px;
  border: none;
  border-radius: 0;
  font-family: var(--primary-font-family, europa, sans-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 14px;
  color: var(--button-txt-color, #ffffff);
  background-color: var(--button-bg-color, #a43143);
  transition: var(--transition, all 200ms ease-in-out);
  -webkit-appearance: none;
  appearance: none;
}

#access-code-entry .form-actions input[type="submit"]:hover,
#access-code-entry .form-actions .button:hover {
  background-color: var(--button-bg-hover-color, #c9344b);
}

@media (max-width: 767px) {
  .path-access-code .access-code-page:not(.has-header-images) {
    padding-top: 30px;
  }

  #access-code-entry {
    padding: 40px 20px;
  }
}