/**
 * File: gravity-forms.css
 * Description: Defines the theme styles for gravity forms.
 */

.gform-theme {
  /* Form heading */
  & .gform_heading {
    position: relative;
    margin-bottom: var(--gf--heading--margin--bottom);

    & .gform_title {
			width: 100%;
      max-width: 50%;
			font-family: var(--gf--heading--font-family);
			font-size: var(--gf--heading--font-size);
			font-weight: var(--gf--heading--font-weight);
			text-align: var(--gf--heading--text-aligh);
			margin-bottom: var(--gf--heading--margin--bottom);
    }

    & .gform_custom_description {
      width: 100%;
      max-width: 50%;

      & p {
        text-align: center;

        &:first-of-type {
          margin-bottom: var(--gf--heading--margin--bottom);
        }
      }
    }

    & .gform_required_legend {
      display: none;
    }
  }

	.gform_confirmation_message {
		font-weight: 700;
		font-size: var(--wp--preset--font-size--large);
	}

	.gsection_title {
		margin-bottom: 0;
		font-size: var(--wp--preset--font-size--large);
	}

  /* Form */
  & .gform-body {
    & .gform_fields {
      gap: var(--gf--body--fields--gap);
    }


    /* Required + asterisk */
    & .gfield_required {
      color: var(--gf--body--label--color);
      align-self: flex-start;
      font-size: var(--gf--body--label--size);
      font-weight: var(--gf--body--label--weight);
      line-height: var(--gf--body--label--line-height);
    }

    /* Generic label */
    & .gfield_label {
      font-size: var(--gf--body--label--size);
      font-style: normal;
      font-weight: var(--gf--body--label--weight);
      line-height: var(--gf--body--label--line-height);
      letter-spacing: var(--gf--body--label--letter-spacing);
    }

    /* Input fields */
    & .ginput_container input,
    & .ginput_container textarea,
    & .ginput_container select {
      background-color: var(--gf--body--field--bg-color);
      border: var(--gf--body--field--border);
      font-size: var(--gf--body--field--size);
      font-weight: var(--gf--body--field--weight);
			color: var(--gf--body--field--color);
      line-height: var(--gf--body--field--line-height);
      letter-spacing: var(--gf--body--field--letter-spacing);
      display: block;
      max-width: 100%;
      width: 100%;
      position: relative;
    }

    & .ginput_container_text input,
    & .ginput_container_phone input,
    & .ginput_container_email input,
    & .ginput_container_textarea textarea {
      padding: var(--gf--body--field--padding);
      height: 100%;
      border-radius: var(--gf--body--field--border-radius);
      box-shadow: none;

      &::placeholder {
        color: var(--gf--body--field--placeholder--color);
      }
    }

    & .ginput_container_select select {
      padding: var(--gf--body--select-field--padding);
      height: 100%;
      border-radius: 0;
      box-shadow: none;
    }

    /* Checkbox */
    & .ginput_container {
      & .gfield_checkbox input.gfield-choice-input {
        border: var(--gf--body--field--border);
        border-radius: var(--gf--body--field--border-radius);
        font-size: var(--gf--body--field--size);
        line-height: var(--gf--body--field--line-height);
        display: inline-flex;
        height: var(--gf--body--checkbox-field--height);
        width: var(--gf--body--checkbox-field--width);
        position: relative;
        transform: var(--gf--body--checkbox-field--transform);
        left: var(--gf--body--checkbox-field--left);
        box-shadow: none;
        margin-top: var(--gf--body--checkbox-field--margin--top);

        &::before {
          position: relative;
          height: var(--gf--body--checkbox-field-checked--height);
          top: var(--gf--body--checkbox-field-checked--top);
          background-color: var(--gf--body--checkbox-field-checked--bg-color);
          border-color: var(--gf--body--checkbox-field-checked--border-color);
          color: var(--gf--body--checkbox-field-checked--color);
        }

        &:hover {
          cursor: pointer;
        }
      }
    }

    & .gfield_checkbox {
      flex-direction: column;
      gap: var(--gf--body--checkbox-field--gap);
    }

    & .gfield_checkbox label {
      font-size: var(--gf--body--label--size);
      cursor: pointer;
      font-weight: 400;
      margin-left: var(--gf--body--checkbox-field-label--margin--left);
    }

    /* Radio */
    & .ginput_container {
      & .gfield_radio input.gfield-choice-input {
        border: none;
        background-color: var(--gf--body--radio-field--bg-color);
        box-shadow: var(--gf--body--radio-field--box-shadow);
        border-radius: var(--gf--body--radio-field--border-radius);
        font-size: var(--gf--body--field--size);
        line-height: var(--gf--body--field--line-height);
        display: inline-flex;
        height: var(--gf--body--radio-field--height);
        width: var(--gf--body--radio-field--width);
        position: relative;
        transform: var(--gf--body--radio-field--transform);
        left: var(--gf--body--radio-field--left);
        margin-top: var(--gf--body--radio-field--margin--top);

        &::before {
          block-size: var(--gf--body--radio-field-checked--block-size);
          width: var(--gf--body--radio-field-checked--width);
          background-color: var(--gf--body--radio-field-checked--bg-color);
          box-shadow: var(--gf--body--radio-field-checked--box-shadow);
          border-radius: var(--gf--body--radio-field-checked--border-radius);
          margin-top: var(--gf--body--radio-field-checked--margin--top);
        }

        &:has(:checked) {
          border: none;
        }

        &:hover {
          cursor: pointer;
        }
      }
    }

    & .gfield_radio {
      flex-direction: column;
      gap: var(--gf--body--radio-field--gap);
    }

    & .gfield_radio label {
      font-size: var(--gf--body--label--size);
      cursor: pointer;
      font-weight: 400;
      margin-left: var(--gf--body--radio-field-label--margin--left);
    }

    /* Consent checkbox */
    & .ginput_container_consent input {
      font-size: var(--gf--body--label--size);

      &::before {
        position: relative;
        height: var(--gf--body--checkbox-field-checked--height);
        top: var(--gf--body--checkbox-field-checked--top);
        background-color: var(--gf--body--checkbox-field-checked--bg-color);
        border-color: var(--gf--body--checkbox-field-checked--border-color);
        color: var(--gf--body--checkbox-field-checked--color);
      }

      &:hover {
        cursor: pointer;
      }

      &:focus {
        box-shadow: none;
      }
    }

    /* File upload */
    & .ginput_container_fileupload {
      /* Single file upload */
      & input[type="file"] {
        height: 100%;
        border-radius: var(--gf--body--single-upload--border-radius);
        box-shadow: none;
        cursor: pointer;

        &::file-selector-button {
          padding: var(--gf--body--single-upload-inner-button--padding);
          border-radius: var(--gf--body--single-upload-inner-button--border-radius);
          margin-bottom: -1px; /* Fixing the weird gap in the bottom of the button that is inside the field input. */
          border-color: var(--gf--body--single-upload-inner-button--border-color); /* Colors the right border of the button that is inside the field input. */
          cursor: pointer;
        }

        &::placeholder {
          color: var(--gf--body--field--placeholder--color);
        }
      }

      /* Multiple file upload */
      & .gform_drop_area {
        background-color: var(--gf--body--multiple-upload--bg-color);
        border: var(--gf--body--multiple-upload--border);
        border-radius: var(--gf--body--multiple-upload--border-radius);
        box-shadow: none;

        &::before {
          color: var(--gf--body--multiple-upload-icon--color);
        }

        & .button.gform_button_select_files.gform-theme-button {
          background-color: var(--gf--body--multiple-upload-button--bg-color) !important;
          color: var(--gf--body--multiple-upload-button--color) !important;
          border: var(--gf--body--multiple-upload-button--border) !important;
          border-radius: var(--gf--body--multiple-upload-button--border-radius);
          display: inline-block !important;
          padding: var(--gf--body--multiple-upload-button--padding) !important;
          text-align: center !important;
          font-size: var(--gf--body--multiple-upload-button--font-size) !important;

          &:hover {
            background-color: var(--gf--body--multiple-upload-button-hover--bg-color) !important;
            border-color:var(--gf--body--multiple-upload-button-hover--border-color) !important;
          }

          &:focus {
            background-color: var(--gf--body--multiple-upload-button-focus--bg-color) !important;
            border-color:var(--gf--body--multiple-upload-button-focus--border-color) !important;
          }

          &:active {
            background-color: var(--gf--body--multiple-upload-button-active--bg-color) !important;
            border-color:var(--gf--body--multiple-upload-button-active--border-color) !important;
          }
        }
      }
    }
  }

  /* Submit button */
  & .gform_footer {
    & input[type="submit"] {
      color: var(--gf--body--submit--color) !important;
      background-color: var(--gf--body--submit--bg-color) !important;
      border: var(--gf--body--submit--border) !important;
      border-radius: var(--gf--body--submit--border-radius) !important;
      display: inline-block !important;
      text-align: center !important;
      cursor: pointer !important;
      font-size: var(--gf--body--submit--font-size) !important;
			font-weight: var(--gf--body--submit--font-weight) !important;
      padding: var(--gf--body--submit--padding) !important;
      margin-top: var(--gf--body--submit--margin-top) !important;
      transition: var(--transition);
			padding-right: 55px!important;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='24' viewBox='0 0 9 24' fill='none'%3E%3Cpath d='M1.5459 17L7.5459 11.5L1.5459 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: 80% center;

      &:hover {
        background-color: var(--gf--body--submit-hover--bg-color) !important;
        border-color:var(--gf--body--submit-hover--border-color) !important;
      }

      &:focus {
        background-color: var(--gf--body--submit-focus--bg-color) !important;
        border-color:var(--gf--body--submit-focus--border-color) !important;
      }

      &:active {
        background-color: var(--gf--body--submit-active--bg-color) !important;
        border-color:var(--gf--body--submit-active--border-color) !important;
      }
    }
  }
}