/* ==================================================
   Recipe submission page
   ================================================== */

/* Recipe submission page */
.submit-page {
	width: min(900px, calc(100% - 40px));
	margin: 0 auto;
	padding: 2.5em 0 5em;
}

/* Intro */
.submit-intro {
	margin-bottom: 2em;
}

	.submit-intro h2 {
		margin: 0.2em 0;
		font-family: "Autour One", sans-serif;
		font-size: clamp(2rem, 5vw, 3rem);
		color: #292913;
	}

	.submit-intro p {
		max-width: 650px;
		line-height: 1.6;
		color: #666;
	}

/* Form sections */
.form-section {
	margin-bottom: 1.5em;
	padding: 1.8em;
	background-color: #fffdf0;
	border: 1px solid #ded6a2;
	border-radius: 14px;
}

	.form-section h3 {
		margin-top: 0;
		font-family: "Autour One", sans-serif;
		color: #333;
	}

.form-section-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
}

.form-help {
	margin-top: -0.4em;
	color: #777;
	font-size: 0.85em;
}

/* Form fields */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2em;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.form-field-wide {
	grid-column: 1 / -1;
}

.form-field label {
	font-family: "Autour One", sans-serif;
	font-size: 0.78em;
	color: #444;
}

.form-field input,
.form-field textarea,
.form-field select {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75em;
	border: 1px solid #c9c393;
	border-radius: 7px;
	background-color: white;
	font: inherit;
}

.form-field textarea {
	resize: vertical;
}

	.form-field input:focus,
	.form-field textarea:focus,
	.form-field select:focus {
		outline: 2px solid #D6CA33;
		border-color: transparent;
	}

/* Input units */
.input-with-unit {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid #c9c393;
	border-radius: 7px;
	background-color: white;
}

	.input-with-unit input {
		border: none;
		border-radius: 0;
	}

	.input-with-unit span {
		padding-right: 0.8em;
		color: #777;
		font-size: 0.85em;
	}

/* Image upload */
.image-upload-area {
	display: flex;
	align-items: center;
	gap: 1.5em;
}

.image-preview {
	width: 180px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #f5f1d8;
	border: 2px dashed #c9c393;
	border-radius: 10px;
	color: #888;
	font-size: 0.8em;
}

	.image-preview img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

#recipe-image {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.image-upload-button {
	display: inline-block;
	padding: 0.7em 1em;
	background-color: #D6CA33;
	border-radius: 7px;
	font-family: "Autour One", sans-serif;
	font-size: 0.75em;
	cursor: pointer;
}

/* Ingredients */
#ingredients-list {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}

.ingredient-form-row {
	display: grid;
	grid-template-columns: minmax(150px, 3fr) minmax(80px, 1fr) minmax(70px, 1fr) auto;
	gap: 0.6em;
}

	.ingredient-form-row input {
		box-sizing: border-box;
		width: 100%;
		padding: 0.65em;
		border: 1px solid #c9c393;
		border-radius: 6px;
		font: inherit;
	}

/* Steps */
#steps-list {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
}

.step-form-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.8em;
	align-items: start;
}

.step-number {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #D4DB81;
	border-radius: 50%;
	font-family: "Autour One", sans-serif;
	font-size: 0.8em;
}

.step-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em;
	border: 1px solid #c9c393;
	border-radius: 6px;
	font: inherit;
	resize: vertical;
}


/* Dynamic buttons */
.form-add-button {
	padding: 0.6em 0.9em;
	border: none;
	border-radius: 6px;
	background-color: #D4DB81;
	font-family: "Autour One", sans-serif;
	font-size: 0.7em;
	cursor: pointer;
}

	.form-add-button:hover {
		background-color: #e5e99d;
	}

.remove-row-button {
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #eee6cf;
	color: #775555;
	font-size: 1.2em;
	cursor: pointer;
}

	.remove-row-button:hover {
		background-color: #f2cccc;
	}


/* Allergens */
.allergen-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.7em;
}

	.allergen-options label {
		display: flex;
		align-items: center;
		gap: 0.4em;
		font-size: 0.85em;
		cursor: pointer;
	}

	.allergen-options input {
		accent-color: #D6CA33;
	}


/* Submit */
.form-submit-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
	padding: 1.5em;
}


	.form-submit-area p {
		margin: 0;
		color: #777;
		font-size: 0.85em;
	}


.submit-recipe-button {
	padding: 0.9em 1.4em;
	border: none;
	border-radius: 8px;
	background-color: #D6CA33;
	color: #222;
	font-family: "Autour One", sans-serif;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

	.submit-recipe-button:hover {
		background-color: #f2e75a;
		transform: translateY(-2px);
	}

.submission-message {
	margin-top: 1em;
	padding: 1.2em;
	background-color: #e4edb3;
	border-radius: 8px;
	line-height: 1.5;
}


/* Responsive submission form */
@media (max-width: 650px) {
	.form-grid {
		grid-template-columns: 1fr;
	}

	.form-field-wide {
		grid-column: auto;
	}

	.form-section-heading {
		flex-direction: column;
	}

	.ingredient-form-row {
		grid-template-columns: 1fr 1fr auto;
	}

	.ingredient-input-name {
		grid-column: 1 / -1;
	}

	.image-upload-area {
		flex-direction: column;
		align-items: flex-start;
	}

	.allergen-options {
		grid-template-columns: repeat(2, 1fr);
	}

	.form-submit-area {
		flex-direction: column;
		align-items: stretch;
	}

	.submit-recipe-button {
		width: 100%;
	}
}