/* General */
.form-header {
	text-align: center;
	font-family: Fredoka;
}

.form-wrapper {
	font-size: 20px;
	font-family: Poppins;
	
	margin: 15px;
	padding: 10px 12px 10px 12px;	
	
	background-color: #e7e7f0;
	border-radius: 10px;
	
	--field-border: 3px solid #9999ac;
}

.form-section {
	margin: 0 0 18px 0;
	border: 0;
	padding: 0;
}

.section-title {
	font-size: 1.5em;
	margin-top: 0;
	margin-bottom: 10px;
}

.form-note {
	color: #4a4a4a;
	font-style: italic;
	font-size: 0.5em;
	margin: 0;
}

.field-wrapper {
	display: flex;
	position: relative;
	margin-bottom: 12px;
	max-width: max-content;
}

			/* Drinks */
.drinks-wrapper {
	display: grid;
	grid: auto / 1fr 1fr;
	gap: 12px;
}

.drink-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	
	position: relative;
	background-color: var(--body-bg);
	
	min-height: 264px;
	border-radius: 7px;
}

.drink-title {
	align-content: center;
	text-align: center;
	line-height: 0.85;
	height: 2em;
}
/* Just change color of drinkbox background and give color to the product image */
.drink-image {
/* 	background-color: wheat;  debug */
	width: 120px;
	height: 120px;
}


			/* Fields - Inputs */
fieldset :is(input, select) {
	font-size: 1em;
	height: 2em;
	width: 100%;
	
	background-color: var(--body-bg);
	border: var(--field-border);
	border-radius: 12px;
	transition: 0.5s;
}
.drink-box input { 
	text-align: center;
	height: 1.5em;
	margin: 8px 15px;
}

.field-title {
	color: #777;
	position: absolute;
	align-self: center;
	margin-left: 10px;
	
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	
	transition: 0.38s, font-style 0s;
}
.field-title i {
	height: 1em;
	width: 1em;
	background-color: currentcolor;
}

.field-title--select {
    pointer-events: none;
}


		/* Field Animations */
/* Input */
.field-wrapper .wpcf7-form-control-wrap:focus-within + .field-title,
.field-wrapper .wpcf7-form-control-wrap:has(input:not(:placeholder-shown)) + .field-title { 
	color: black;
	font-size: 0.65em;
	font-style: italic;
	
	align-self: start;
	top: 5px;
}
.field-wrapper .wpcf7-form-control-wrap:focus-within > input,
.field-wrapper .wpcf7-form-control-wrap:has(input:not(:placeholder-shown)) > input { 
	padding-top: 1em;
	padding-bottom: 3px;
	padding-left: 7px;
}

/* Select */
.wpcf7-form-control-wrap:focus-within + .field-title--select,
.wpcf7-form-control-wrap:has(select option:checked:not([value=""])) + .field-title--select {
    color: black;
	font-size: 0.65em;
    font-style: italic;
    
    align-self: start;
    top: 5px;
}
.wpcf7-form-control-wrap:focus-within > select,
.wpcf7-form-control-wrap:has(select option:checked:not([value=""])) > select { 
	box-sizing: content-box;
	
	padding-top: 1em;
	padding-left: 7px;
} 



		/* Tweaks */

/* CF7 */
.field-wrapper .wpcf7-not-valid-tip { /* Error notification */
	position: absolute;
	right: 5px;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}
.wpcf7-form-control-wrap {
	display:flex;
}
.field-wrapper select {
	box-sizing: content-box;
}


/*  Number Inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}