/* 
 * forms.css
 * Extracted from sitewide.css
 * Contains only wpcf7 / contact form styling
 */

/****************
* Contact Form 7 plugin styling
****************/

.wpcf7 {
    text-align: left;
	--gl--contact--form--field--width: 140px;
}

/* Input styling */

/* Line breaks in form output <br> but we just neutralise this */
.wpcf7 br {
    display: none;
}


/* Inline validation messages */
.wpcf7 .wpcf7-not-valid-tip {
    position: relative;
    font-size: 90%;
    /* padding-bottom: .5rem; */
    transition: all 0.2s;
    transform: translateY(-30%);
    margin-top: 0;
}

/* Insert an icon before inline validation messages */
.wpcf7 .wpcf7-not-valid-tip::before {
    content:"";
    display: inline-block;
    height: .8em;
    min-width: .2em;
    padding-right: .5em;
    margin-right: .3em;
		margin-left: -.75em;
    background-repeat: no-repeat;
    transform: scaleX(-100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' style='fill:%23cc212c'%3E%3Cpath d='M32 448c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c53 0 96-43 96-96l0-306.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 416c0 17.7-14.3 32-32 32l-96 0z'/%3E%3C/svg%3E");
}


/* Make main form responses a flex so the :before icon is aligned vertically */
.wpcf7-response-output {
    display: flex;
}

/* Negative main form responses */
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    color: #c0392b;
    font-size: var(--wp--preset--font-size--small);
    padding: .5em .5em;
    margin: 1em 0 0 0;
    border: none;
    font-weight: 600;
    font-family: var(--wp--preset--font-family--body);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.1em;
	border-radius: 3px;
	text-align: left;
}

div:not(.outline-form) .wpcf7 form.invalid .wpcf7-response-output, 
div:not(.outline-form) .wpcf7 form.unaccepted .wpcf7-response-output, 
div:not(.outline-form) .wpcf7 form.payment-required .wpcf7-response-output {
	margin: .5em 0 .5em 0;
}


/* All checkbox items */ 
.wpcf7 .wpcf7-list-item {
    margin: 0;
    height: 100%;
}

/* All checkbox labels */
.wpcf7 .wpcf7-list-item label{
    display: flex;
    column-gap: .3em;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* wrap checkboxes in <p> with class="checkbox-row" to make them a row */
.wpcf7 .checkbox-row {
    display: flex;
    flex-direction: row;
    row-gap: 1em;
    column-gap: 1em;
}

/* wrap checkboxes in <p> with class="checkbox-row" to make them a row */

.wpcf7 .checkbox-row,
.wpcf7 p:not(.checkbox-column):not(.checkbox-row):has(.wpcf7-form-control.wpcf7-checkbox)  {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    row-gap: 1em;
    column-gap: 1em;
    line-height: 1.2em;

}

.wpcf7 p:not(.checkbox-column):not(.checkbox-row):has(.wpcf7-form-control.wpcf7-checkbox) .wpcf7-form-control {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 1em;
    column-gap: 1em;
}

.wpcf7 .checkbox-row .wpcf7-list-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wpcf7 p:has(.wpcf7-list-item.first.last) {
	width: 100%;
}

.wpcf7 .wpcf7-form-control-wrap .wpcf7-list-item input {
	max-width: 30px;
	margin: 0;
}

.wpcf7 p:has(.wpcf7-list-item.first.last) {
	margin-bottom: 1.25rem;
	margin-top: .75rem;
}

.wpcf7 p:has(.wpcf7-list-item.first.last) .wpcf7-form-control-wrap,
.wpcf7 p:has(.wpcf7-list-item.first.last) .wpcf7-form-control-wrap .wpcf7-form-control,
.wpcf7 .wpcf7-form-control-wrap .wpcf7-list-item span {
	max-width: unset;
	width: 100%;
	display: block;
}

.wpcf7 p:not(.checkbox-column):not(.checkbox-row):has(.wpcf7-form-control.wpcf7-checkbox) .wpcf7-list-item {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: nowrap;
	height: auto;
}

/* wrap checkboxes in <p> with class="checkbox-column" to make them a column */
.wpcf7 .checkbox-column {
    display: flex;
    flex-direction: column;
    row-gap: 0em;
}

.wpcf7 .checkbox-column .wpcf7-list-item input[type="checkbox"] {
    margin-left: 0;
}

.wpcf7 p.checkbox-row,
.wpcf7 p.checkbox-column,
.wpcf7 p:has(.wpcf7-form-control.wpcf7-checkbox) {
    position: relative;
    font-size: var(--wp--preset--font-size--small)
}

.wpcf7 p.checkbox-row,
.wpcf7 p.checkbox-column,
.wpcf7 p:has(.wpcf7-form-control.wpcf7-checkbox)  {
    position: relative;
    transition: padding 0.2s ease;

}

.wpcf7 p.checkbox-row:has(.wpcf7-not-valid-tip),
.wpcf7 p.checkbox-column:has(.wpcf7-not-valid-tip),
.wpcf7 p:has(.wpcf7-form-control.wpcf7-checkbox):has(.wpcf7-not-valid-tip)  {
    padding-bottom: 25px;
}

.wpcf7 p.checkbox-row .wpcf7-not-valid-tip,
.wpcf7 p.checkbox-column .wpcf7-not-valid-tip,
.wpcf7 p:has(.wpcf7-form-control.wpcf7-checkbox) .wpcf7-not-valid-tip 
{
    position: relative;
    top: 30px;
}

/* updates */

.wpcf7 .wpcf7-form p {
	line-height: 0;
	margin: 0;
}

/* for the forms that still have <p> tags */
.wpcf7 p > label  .wpcf7-form-control-wrap input:has(~.wpcf7-not-valid-tip) {margin-bottom: 1.25rem;}

.wpcf7 p > label  .wpcf7-not-valid-tip {
    transform: translateY(-10px);
    height: fit-content;
    line-height: 1.2em;
	padding-left: .75em;
}


.wpcf7-not-valid-tip {
    max-height: 0; 
    overflow: hidden;
    animation: expand 1s forwards;
    
}

@keyframes expand {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 50px;
  }
}

/* stop animation of hidden contact form spinner */ 

form .wpcf7-spinner::before {
	animation-name: unset;
}

form.submitting .wpcf7-spinner::before {
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.wpcf7 p:has(.wpcf7-form-control.width25[type="submit"]) {
		width: calc(25% - .5rem);
		flex-grow: 1;
	margin-top: -1px;
	    min-width: min(150px, 100%);
}
.wpcf7 p:has(.wpcf7-form-control.width33[type="submit"]) {
		width: calc(33% - .5rem);
		flex-grow: 1;
		margin-top: -1px;
		min-width: min(150px, 100%);
}
.wpcf7 p:has(.wpcf7-form-control.width50[type="submit"]) {
		width: calc(50% - .5rem);
		flex-grow: 1;
	margin-top: -1px;
	    min-width: min(150px, 100%);
}
.wpcf7 p:has(.wpcf7-form-control.width66[type="submit"]) {
		width: calc(66% - .5rem);
		flex-grow: 1;
	margin-top: -1px;
	    min-width: min(150px, 100%);
}
.wpcf7 p:has(.wpcf7-form-control.width75[type="submit"]){
	width: calc(75% - .5rem);
	flex-grow: 1;
	margin-top: -1px;
	    min-width: min(150px, 100%);
}

.wpcf7 p:has(.wpcf7-form-control[type="submit"]) [type="submit"]{
	min-width: min(200px, 100%);
	max-width: 100%;
	position: relative;
}


form p .wpcf7-spinner,
form p .wpcf7-spinner::before {
	display: none;
}

form.submitting p .wpcf7-submit::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M208 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm0 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM48 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm368 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM75 369.1A48 48 0 1 1 142.9 437 48 48 0 1 1 75 369.1zM75 75A48 48 0 1 1 142.9 142.9 48 48 0 1 1 75 75zM437 369.1A48 48 0 1 1 369.1 437 48 48 0 1 1 437 369.1z'/%3E%3C/svg%3E");	font-family: " ";
	position: absolute;
	content:" ";
	right: .5rem;
	aspect-ratio: 1;
	overflow: hidden;
	display: inline-block;
	color: inherit;
	height: 1em;
	width: 1em;
	margin-top: 1px;
	transform-origin: center;
	visibility: visible;
	animation-name: spin;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(8);
    animation-timing-function: steps(8);
	z-index: 10;}


.wpcf7-response-output:empty {
	opacity: 0;
}



.wpcf7 p:last-of-type:has(button) {
	margin-top: auto;
	margin-bottom: auto;
}

.wpcf7-form.submitting .wpcf7-submit {
    pointer-events: none;
}


.wpcf7 .wpcf7-list-item.first.last {
	flex-direction: row;
}

.wpcf7 .wpcf7-submit[disabled] {
	cursor: not-allowed;
	transition: background-color 0.2s, color 0.2s;
	background-color: #CCCCCC !important;
	color: var(--wp--preset--color--contrast-2) !important;
	    border-color: #CCCCCC !important;
}


.wpcf7 .wpcf7-form[data-status="sent"] .wpcf7-response-output {
	background-color: var(--wp--preset--color--accent-2);
	border: none;
	margin-left: 0;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--small);
    padding: .75em .5em;
    margin: 10px 0 10px 0;
    border: none;
    font-weight: 600;
    font-family: var(--wp--preset--font-family--body);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.1em;
    border-radius: 3px;
	text-align: left;
}

.wpcf7 .wpcf7-form[data-status="sent"] .wpcf7-response-output:before {
content: "\2713";
    font-family: inherit;
    display: inline-block;
    min-width: 1.4em;
    margin-right: 0;
    font-weight: 700 !important;
    font-size: 140%;
}

.wpcf7  p.message {
	font-size: 0.775rem;
}