/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
  content: ' '; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

#varioart-config-container {
  /* font-size: 1.125rem; */
  font-size: 1rem;
  line-height: 1.625rem;
}

#varioart-config-container h4 {
  margin: 0 0 1em;
  font-weight: bold;
  color: #000;
}

#varioart-config-container p {
  margin: 0 0 1em;
}

#varioart-config-container::placeholder {
  color: #bfbfbf;
}

#varioart-config-container * {
  box-sizing: border-box;
}

.wpcf7
  #varioart-config-container
  section:not(:nth-of-type(3), :nth-of-type(4))
  .wpcf7-form-control-wrap {
  display: inline-block;
  margin-bottom: 1rem;
}

.wpcf7
  #varioart-config-container
  section:nth-of-type(1)
  .wpcf7-form-control-wrap {
  width: auto;
  display: inline-block;
}

#varioart-config-container .wpcf7-radio .wpcf7-list-item label,
#varioart-config-container .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#varioart-config-container
  .wpcf7-radio
  input[type='radio']
  + .wpcf7-list-item-label,
#varioart-config-container
  .wpcf7-checkbox
  input[type='checkbox']
  + .wpcf7-list-item-label {
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

#varioart-config-container
  .wpcf7-radio
  input[type='radio']
  + .wpcf7-list-item-label::before,
#varioart-config-container
  .wpcf7-checkbox
  input[type='checkbox']
  + .wpcf7-list-item-label::before {
  position: absolute;
  left: 5px;
  transition: all 0.3s ease;
}

/* depending item */

#varioart-config-container
  .wpcf7-radio
  input[type='radio']:checked
  + .wpcf7-list-item-label::before,
#varioart-config-container
  .wpcf7-checkbox
  input[type='checkbox']:checked
  + .wpcf7-list-item-label::before {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  display: inline-block;
  background-color: #e21d2f;
}

#varioart-config-container .wpcf7-list-item {
  display: block;
  position: relative;
  margin-left: 0;
}

#varioart-config-container input,
#varioart-config-container textarea {
  padding: 0.625rem;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid #c67475;
  outline: unset;
  border-radius: 0;
}

#varioart-config-container input:not([type='checkbox']).vario-short {
  width: 90px;
  display: inline-block;
}

#varioart-config-container input:not([type='radio']),
#varioart-config-container input:not([type='checkbox']),
#varioart-config-container textarea {
  width: 100%;
}

@media screen and (max-device-width: 1023px) and (orientation: portrait) {
  #varioart-config-container input[type='file'] {
    width: calc(100% - 2px);
  }
}

#varioart-config-container input[type='radio'],
#varioart-config-container input[type='checkbox'] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  padding: 0;
  appearance: none;
  align-self: baseline;
}

.varioart-submit-button,
.varioart-submit-button + .wpcf7-spinner {
  display: none !important;
  visibility: hidden;
}

#varioart-config-container section {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row nowrap;
  padding: 0;
}

@media screen and (max-device-width: 1023px) and (orientation: portrait) {
  #varioart-config-container section {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
  }
}

/* Step 1, 2 */

#varioart-config-container section:nth-of-type(1) > div,
#varioart-config-container section:nth-of-type(2) > div {
  flex: 0 0 25%;
  padding: 0.563rem 1.125rem;
}

#varioart-config-container section:nth-of-type(1) > div:nth-child(odd),
#varioart-config-container section:nth-of-type(2) > div:nth-child(odd) {
  background-color: #dfdfdf;
}

/* Step 3 */

#varioart-config-container section:nth-of-type(3) {
  flex-flow: row wrap;
  gap: 0 2.5rem;
}

#varioart-config-container section:nth-of-type(3) > div:nth-child(1) {
  flex: 0 3 100%;
}

#varioart-config-container section:nth-of-type(3) > div:nth-child(2) {
  flex: 0 2 calc(67% - 1.25rem);
}

#varioart-config-container section:nth-of-type(3) > div:nth-child(3) {
  flex: 0 1 calc(33% - 1.25rem);
}

@media screen and (max-device-width: 1023px) and (orientation: portrait) {
  #varioart-config-container section:nth-of-type(3) {
    flex-flow: column nowrap;
    gap: 0;
  }
}

/* Step 4 */

#varioart-config-container section:nth-of-type(4) {
  background-color: #dfdfdf;
  flex-flow: row wrap;
  gap: 0 2.5rem;
  justify-content: center;
}

#varioart-config-container section:nth-of-type(4) > div {
  padding: 0.563rem 1.125rem;
}

#varioart-config-container section:nth-of-type(4) > div:nth-child(1) {
  flex: 0 2 80%;
}

#varioart-config-container section:nth-of-type(4) > div:nth-child(2),
#varioart-config-container section:nth-of-type(4) > div:nth-child(3) {
  flex: 0 1 calc(40% - 1.25rem);
}

@media screen and (max-device-width: 1023px) and (orientation: portrait) {
  #varioart-config-container section:nth-of-type(4) {
    flex-flow: column nowrap;
    gap: 0;
    justify-content: center;
  }

  #varioart-config-container section:nth-of-type(4) > div {
    padding: 0 1.125rem;
  }

  #varioart-config-container section:nth-of-type(4) > div:first-of-type {
    padding-top: 0.563rem;
  }
}

/* Success message */

.varioart-success-message {
  max-width: 640px;
  margin: 0 auto;
}

.varioart-success-message h3 {
  font-weight: bold;
  color: #910000;
}

.varioart-success-message button {
  font-size: 1.125rem;
  line-height: 1em;
  font-weight: bold;
  background: #fff;
  border: 1px solid #ef7481;
  color: #e21d2f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 8.438rem;
  margin: 1.5rem auto;
  padding: 0.5rem 0.5rem;
  text-decoration: none;
  cursor: pointer;
}

.varioart-success-message button:focus {
  outline: none;
}

.varioart-success-message button::after {
  width: 1rem;
  height: 1rem;
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAAAAABzpdGLAAAApklEQVR4AV3PgQfCQBTH8fe/32oGI5kQxSTMRGA0B6ZMpAyaBEIQI2Im59V7dz3TF/vdPg4OkHoVs5E/TitDP0RG+8oWXS11CyUN9kwrAbLLl2rlyqb0Dd+AEyelu76FRmRjD3M49YWDgkejVkIlz9LcAqGz3VQsgNb7swQwUT/LeWvAxnMW8a2YHnRUvcInER48keiBTHiPLQzzFom4ZpetddXx+QNGAdVLqjWMOAAAAABJRU5ErkJggg==);
}

/* sliding buttons */

#varioart-config-container .btc-toggle-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  display: block; /* keep layout stable */
  margin-top: 0.5rem;
  margin-left: 2rem;
}

#varioart-config-container .btc-toggle-content.active {
  max-height: 100px; /* should be large enough for your content */
  opacity: 1;
}

#varioart-config-container .toggle-icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  margin-left: 0.5rem;
  transform: rotate(0deg) scale(0.9);
  transition: transform 0.3s ease;
  cursor: pointer;
}

#varioart-config-container .toggle-icon.rotated {
  transform: rotate(-90deg) scale(0.9);
}

#varioart-config-container .field-error {
  outline: 2px solid red;
}