/* ==========================================================================
   WPlama Mail: supplement to the form styles of the theme wplama (13-forms.css,
   05-buttons.css). The form uses the theme classes (.wpl-form, .wpl-field,
   .wpl-input, .wpl-check, .wpl-btn); here is only what the theme does not have:
   e-mail and button in one row and the alignment from the shortcode.
   ========================================================================== */

.wplama-mail-form {
	position: relative;
	min-width: 0;
}

/* Layout "inline": e-mail and button in one row, the button below the field where narrow */
.wplama-mail-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.wplama-mail-form__row > .wpl-field__control {
	flex: 1 1 240px;
	min-width: 0;
}

.wplama-mail-form__row > .wpl-form__submit {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.wplama-mail-form__row > .wpl-form__submit {
		flex-basis: 100%;
	}
}

/* align="center" */
.wplama-mail-form--center :is(.wpl-form__title, .wpl-form__intro) {
	text-align: center;
}

.wplama-mail-form--center :is(.wpl-form__actions, .wpl-form__note) {
	justify-content: center;
	text-align: center;
}

.wplama-mail-form--center .wpl-form__success {
	align-items: center;
	text-align: center;
}

/* align="input" (inline layout only): the e-mail row sits on the centre line of the
   neighbouring column, the consent text below it (13 px × 1.5) is balanced by the
   same space on top */
@media (min-width: 768px) {
	.wplama-mail-form--align-input {
		padding-top: calc(19.5px + 18px);
	}
}