.wpcf7 {
overflow: hidden;
margin-top: 1.5rem;
}
[dir="rtl"] .wpcf7 {
direction: rtl;
}
.wpcf7 h1,
.wpcf7 h2,
.wpcf7 h3,
.wpcf7 h4,
.wpcf7 h5,
.wpcf7 h6 {
margin-bottom: var(--tripp-spacing-xs);
}
.wpcf7 .tripp-xt-required {
color: var(--tripp-color-alert);
}
.wpcf7 .wpcf7-list-item {
display: block;
margin: 1rem 0 0;
}
.wpcf7 .wpcf7-list-item-label {
display: inline;
vertical-align: middle;
}
.wpcf7 .wpcf7-spinner {
position: absolute;
}
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing {
background-color: rgba(220, 50, 50, 0.5);
border: none;
border-radius: 0.5rem;
color: #fff;
margin: 1.5rem 0;
padding: 1.5rem;
}
.wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea).wpcf7-not-valid {
border-color: var(--tripp-color-alert);
}
.wpcf7 .wpcf7-not-valid-tip {
color: var(--tripp-color-alert);
font-size: var(--tripp-font-size-xs);
margin: 0.5rem 0 0;
}
.wpcf7 .wpcf7-form .wpcf7-response-output {
border-radius: 0.5rem;
border-width: 0;
margin: 1rem 0;
padding: 1.5rem;
}
.wpcf7 form.failed .wpcf7-response-output {
background-color: rgba(220, 50, 50, 0.5);
color: #fff;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
background-color: rgba(255, 185, 0, 0.2);
}
.wpcf7-form > p {
margin: 0 0 1rem;
}
.wpcf7-form select {
width: 100%;
}
.wpcf7-form .wpcf7-acceptance label {
margin: 0;
} .tripp-xt-form-row {
display: flex;
flex-flow: row nowrap;
gap: 1.5rem;
margin-top: 1.5rem;
overflow: hidden;
width: 100%;
}
.wpcf7-form .tripp-xt-form-row:not(.tripp-xt-form-row ~ .tripp-xt-form-row) {
margin-top: 0;
}
.tripp-xt-form-col {
flex: 1 1 auto;
width: auto;
}
.tripp-xt-form-row p {
margin: 0;
}
.tripp-xt-form-col > label {
font-weight: 600;
}
.tripp-xt-form-row.has-align-left {
text-align: left;
}
.tripp-xt-form-row.has-align-center {
text-align: center;
}
.tripp-xt-form-row.has-align-right {
text-align: right;
}
.tripp-xt-form-row.has-width-100 p {
width: 100%;
} .wpcf7-form:has(.tripp-xt-newsletter-form) {
display: flex;
flex-flow: row wrap;
gap: 1.5rem;
}
.tripp-xt-newsletter-form {
flex-flow: row wrap;
gap: 1.5rem;
margin: 0;
}
.tripp-xt-newsletter-form div:first-child {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}
.wpcf7-form .tripp-xt-newsletter-form.tripp-xt-form-row p {
margin: 0;
}
.tripp-xt-newsletter-form :is(input[type="email"], input[type="text"]) {
background: linear-gradient(rgb(var(--tripp-color-surface-rgb)), rgb(var(--tripp-color-surface-rgb))) padding-box, linear-gradient(to right, rgb(var(--tripp-color-secondary-rgb)), rgb(var(--tripp-color-primary-rgb))) border-box;
border: 2px solid rgb(var(--tripp-color-surface-rgb));
color: rgb(var(--tripp-color-on-surface-rgb));
height: 5rem;
position: relative;
transition: border-color 0.3s var(--tripp-transition-ease);
z-index: 2;
width: 100%;
}
.tripp-xt-newsletter-form input:hover,
.tripp-xt-newsletter-form input:focus {
border-color: transparent;
}
.tripp-xt-newsletter-form input[type="text"]:focus,
.tripp-xt-newsletter-form input[type="email"]:focus {
border-color: transparent;
}
.tripp-xt-newsletter-form ::placeholder {
color: rgba(var(--tripp-color-on-surface-rgb), 0.6);
}
.tripp-xt-newsletter-form :is(input[type="email"], input[type="text"]).wpcf7-not-valid {
border: 2px solid var(--tripp-color-alert);
}
.tripp-xt-newsletter-form [type="submit"] {
height: 5rem;
padding: 0 1.5rem;
width: 100%;
}
.tripp-xt-newsletter-form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
.tripp-xt-newsletter-form .wpcf7-acceptance label {
display: flex;
flex-flow: row nowrap;
font-size: var(--tripp-font-size-sm);
width: 100%;
}
.tripp-xt-newsletter-form .wpcf7-acceptance input[type="checkbox"] {
flex: 0 0 1.8rem;
margin-right: 1rem;
margin-top: 0.2rem;
width: 1.8rem;
}
.tripp-xt-newsletter-form .wpcf7-acceptance .wpcf7-list-item-label {
flex: 1 1 100%;
width: 100%;
}
.tripp-xt-newsletter-form :is(input[type="submit"], button[type="submit"]) {
height: 5rem;
}
.tripp-xt-newsletter-form .wpcf7-list-item-label a {
text-decoration: underline;
}
@media (min-width: 600px) { .tripp-xt-newsletter-form {
flex-flow: row nowrap;
}
.tripp-xt-newsletter-form [type="submit"] {
flex: 1 1 auto;
width: auto;
}
}