/* Base resets so Elementor style controls apply predictably */
.cf7se-wrapper .wpcf7-form {
	box-sizing: border-box;
}
.cf7se-wrapper .wpcf7-form p {
	margin: 0;
}
.cf7se-wrapper .wpcf7-form input,
.cf7se-wrapper .wpcf7-form select,
.cf7se-wrapper .wpcf7-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
}
.cf7se-wrapper .wpcf7-form input[type="submit"] {
	cursor: pointer;
	transition: all 0.25s ease;
	width: auto;
}
.cf7se-wrapper .wpcf7-spinner {
	margin-left: 10px;
}
.cf7se-wrapper .wpcf7-not-valid-tip {
	color: #d9534f;
	font-size: 12px;
	margin-top: 4px;
	display: block;
}
.cf7se-wrapper .wpcf7-response-output {
	border-radius: 8px;
	margin-top: 15px;
}

/* Two-column ("grid") layout support.
   In your CF7 Form tab, wrap two fields you want side-by-side like this:

   <div class="cf7se-row">
     <p class="cf7se-col">
       [select attendance "Accepts with Pleasure" "Declines with Regret"]
     </p>
     <p class="cf7se-col">
       [number guests-count min:1 max:20 value:1]
     </p>
   </div>
*/
.cf7se-layout-grid .cf7se-row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
.cf7se-layout-grid .cf7se-col {
	flex: 1;
	min-width: 140px;
}

@media (max-width: 480px) {
	.cf7se-layout-grid .cf7se-row {
		flex-direction: column;
	}
}