/* 
  * Hide the pre-selected "Yes" option on each new (Li) consent question.
  * The .optin-yes-option class is applied by initNewQuestionStyling()
  * in optin-handler.js, so this stays driven by the channel config. 
*/
.optin-yes-option {
  display: none;
}

/*
 * "All comms opted in" confirmation message: hidden until every new
 * question on the page is hidden. updateCommsMessage() reveals it via
 * jQuery when that condition is met.
 */
.comms-opted-in-message {
  display: none;
}


/*
 * Render the new-question radio as a square checkbox-style tick
 *
 * These are <input type="radio">, so the checkbox rules (scoped to
 * type=checkbox) don't reach them and the radio "circle" rules do.
 * Values copied from our checkbox styles.
 */

body.fa .en__field--radio[class*="-li-"] .en__field__item input[type=radio] + label:before {
  border-radius: 0;        /* override radio circle */
  left: -32px;             /* align with checkbox box/tick */
  top: 3px;
}

body.fa .en__field--radio[class*="-li-"] .en__field__item input[type=radio] + label:after {
  content: "";
  border-top: 0;
  border-right: 0;
  border-bottom: 4px solid #000;
  border-left: 4px solid #000;
  border-radius: 0;        /* override the radio dot's 50% */
  position: absolute;
  top: 5px;
  left: -32px;
  margin: 0;
  width: 11px;
  height: 5px;
  box-sizing: content-box;
  background-color: #fff;
  box-shadow: .375rem .375rem 0 0 #fff;
  transform: translate(.375rem, .25rem) rotate(-45deg) scaleX(0);
  transform-origin: left;
}

body.fa .en__field--radio[class*="-li-"] .en__field__item input[type=radio]:checked + label:after {
  transform: translate(.375rem, .25rem) rotate(-45deg) scaleX(1);
}

/* fix tickbox for handraiser elements that have .col-right block */
body.fa div.col-right .en__field--radio[class*="-li-"] .en__field__item input[type=radio]:checked + label:after {
    top: 7px;
    background-color: transparent;
    box-shadow: none;
    transform-origin: 7.5px 4.5px;
}

body.fa div.col-right h2 {
  font-weight: 700;
  margin-top: 0.83rem;
}

body.fa div.col-right .en__field--select .en__field__element .en__field__input {
  padding: 12px 12px 12px 6px;
  height: 56px;
}