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

.gform-theme {

  /* Form heading */
  & .gform_heading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: var(--gf--heading--allign);
    margin-bottom: var(--gf--heading--margin--bottom);

    & .gform_title {
			color: var(--gf--heading--title--color);
      width: 100%;
      text-align: var(--gf--heading--title--text-allign);
			margin-bottom: var(--gf--heading--title--margin--bottom);
    }

    & .gform_custom_description {
      width: 100%;
			text-align: var(--gf--heading--description--text-allign);
    }

    & .gform_required_legend {
      display: none;
    }
  }

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

		/* Section field */
		& .gsection {
			border-bottom: var(--gf--body--section--border-bottom);
			padding: var(--gf--body--section--padding);
			margin-bottom: var(--gf--body--section--margin-bottom);

			& .gsection_title {
				font-family: var(--gf--body--section--title--font-family);
				font-size: var(--gf--body--section--title--font-size);
				font-weight: var(--gf--body--section--title--font-weight);
				line-height: var(--gf--body--section--title--line-height);
				text-transform: var(--gf--body--section--title--text-transform);
				margin-top: var(--gf--body--section--title--margin-top);
				margin-bottom: var(--gf--body--section--title--margin-bottom);
			}
		}

    /* 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-family: var(--gf--body--label--font-family);
      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);
      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_name input,
    & .ginput_container_phone input,
    & .ginput_container_email input,
		& .ginput_container_date input,
		& .ginput_container_number 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 {
				font-family: var(--gf--body--field--placeholder--font-family);
				font-size: var(--gf--body--field--placeholder--font-size);
				font-weight: var(--gf--body--field--placeholder--font-weight);
				line-height: var(--gf--body--field--placeholder--line-height);
        color: var(--gf--body--field--placeholder--color);
      }
    }

		/* Date field (adding icon to the field) */
		& .ginput_container_date {
			position: relative;

			&::after {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="24" viewBox="0 0 21 24" fill="none"><path d="M7.12744 1.125C7.12744 0.501562 6.62588 0 6.00244 0C5.379 0 4.87744 0.501562 4.87744 1.125V3H3.00244C1.34775 3 0.00244141 4.34531 0.00244141 6V6.75V9V21C0.00244141 22.6547 1.34775 24 3.00244 24H18.0024C19.6571 24 21.0024 22.6547 21.0024 21V9V6.75V6C21.0024 4.34531 19.6571 3 18.0024 3H16.1274V1.125C16.1274 0.501562 15.6259 0 15.0024 0C14.379 0 13.8774 0.501562 13.8774 1.125V3H7.12744V1.125ZM2.25244 9H18.7524V21C18.7524 21.4125 18.4149 21.75 18.0024 21.75H3.00244C2.58994 21.75 2.25244 21.4125 2.25244 21V9Z" fill="%23EEEAE4"/></svg>');
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 0;
				right: -1px;
				width: 56px;
				height: 100%;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				background-color: var(--wp--preset--color--green--80);
				transition: var(--transition);
			}
		}

    & .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);
    }

		/* Experience Activities multiple choice */
		& .gform_experience_activities {
			.gfield_radio,
			.gfield_checkbox {
				display: flex;
				flex-direction: row;
				gap: 8px;
				flex-wrap: wrap;

				/* Hide input field */
				& input {
					display: none !important;
				}

				/* Style the labels as buttons */
				& label {
					display: block;
					font-family: var(--wp--preset--font-family--paragraph);
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					color: var(--wp--preset--color--green--100);
					background-color: transparent;
					border: 1px solid var(--wp--preset--color--green--100);
					padding: 8px 16px;
					margin: 0;
					cursor: pointer;
					transition: var(--transition);
				}

				/* Selected state styling */
				& input:checked + label {
					background-color: var(--wp--preset--color--green--100);
					color: var(--wp--preset--color--quaternary--100);
				}
			}

		}

    /* 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-family: var(--gf--body--submit--font-family) !important;
      font-size: var(--gf--body--submit--font-size) !important;
			font-weight: var(--gf--body--submit--font-weight) !important;
			text-transform: var(--gf--body--submit--text-transform) !important;
			line-height: var(--gf--body--submit--line-height) !important;
			letter-spacing: var(--gf--body--submit--letter-spacing) !important;
      padding: var(--gf--body--submit--padding) !important;
      margin-top: var(--gf--body--submit--margin-top) !important;
      transition: var(--transition);

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

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

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