/* Farm Fulfillment Locations — selector styles (Build 3: modal-style refinement) */

/* --------------------------------------------------------------------- */
/* Panel container — presents /select-location/ as a centered, card-like */
/* "modal" panel rather than a plain long page.                          */
/* --------------------------------------------------------------------- */

.ffl-selector {
	box-sizing: border-box;
	max-width: 800px;
	width: 100%;
	margin: 3rem auto;
	padding: 2.5rem 2.75rem;
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid #e6e6e6;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ffl-selector * {
	box-sizing: border-box;
}

.ffl-selector__heading {
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 1.5rem;
	color: #1f2a20;
}

.ffl-selector__error,
.ffl-selector__notice {
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-size: 16px;
	line-height: 1.4;
}

.ffl-selector__error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #7a1f1a;
}

.ffl-selector__notice {
	background: #fff8e5;
	border: 1px solid #f0dca0;
	color: #6b5300;
}

/* --------------------------------------------------------------------- */
/* Step 1: ZIP entry                                                      */
/* --------------------------------------------------------------------- */

.ffl-selector__zip-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}

.ffl-selector__label {
	display: block;
	font-weight: 600;
	font-size: 19px;
	width: 100%;
	margin-bottom: 0.5rem;
	color: #333;
}

.ffl-selector__zip-input {
	flex: 1 1 200px;
	font-size: 18px;
	height: 54px;
	padding: 0 1rem;
	border: 2px solid #ccc;
	border-radius: 8px;
	min-width: 0;
	transition: border-color 0.15s ease;
}

.ffl-selector__zip-input:focus {
	border-color: #2f5d34;
	outline: none;
	box-shadow: 0 0 0 3px rgba(47, 93, 52, 0.15);
}

.ffl-selector__submit {
	background: #2f5d34;
	color: #fff;
	border: none;
	border-radius: 8px;
	height: 54px;
	padding: 0 1.75rem;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.ffl-selector__submit:hover,
.ffl-selector__submit:focus-visible {
	background: #24462a;
	outline: none;
}

.ffl-selector__submit:focus-visible {
	box-shadow: 0 0 0 3px rgba(47, 93, 52, 0.3);
}

/* --------------------------------------------------------------------- */
/* Step 2: results                                                       */
/* --------------------------------------------------------------------- */

.ffl-selector__zip-display {
	font-weight: 800;
}

.ffl-selector--results-step .ffl-selector__heading {
	font-size: 25px;
	margin-bottom: 0.4rem;
}

.ffl-selector__edit-zip {
	display: inline-block;
	margin: 0 0 1.5rem;
	font-size: 15px;
	color: #2f5d34;
	text-decoration: underline;
}

.ffl-selector__edit-zip:hover,
.ffl-selector__edit-zip:focus-visible {
	color: #1c3820;
}

/* The scrollable results list — keeps the heading/"enter a different ZIP" */
/* link visible above it instead of letting the page grow indefinitely.   */
.ffl-selector__options {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	max-height: 56vh;
	overflow-y: auto;
	padding-right: 0.35rem; /* room for scrollbar so cards don't shift */
	margin-right: -0.35rem;
}

.ffl-selector__options::-webkit-scrollbar {
	width: 8px;
}

.ffl-selector__options::-webkit-scrollbar-thumb {
	background: #d5d5d5;
	border-radius: 8px;
}

.ffl-option {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 2px solid #e2e2e2;
	border-radius: 12px;
	padding: 1.25rem 1.4rem;
	font-size: 16px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ffl-option:hover,
.ffl-option:focus-visible {
	border-color: #2f5d34;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	outline: none;
}

.ffl-option--fedex {
	border-color: #cfe0d4;
	background: #f5faf6;
}

.ffl-option__icon {
	font-size: 1.9rem;
	line-height: 1;
	flex: 0 0 auto;
	margin-top: 0.1rem;
}

.ffl-option__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.ffl-option__title {
	font-weight: 700;
	font-size: 20px;
	color: #1f2a20;
}

.ffl-option__subtitle,
.ffl-option__address {
	font-size: 15.5px;
	color: #555;
	line-height: 1.4;
}

.ffl-option__distance {
	font-size: 15px;
	color: #2f5d34;
	font-weight: 600;
}

.ffl-option__distance--unknown {
	color: #8a6d00;
}

.ffl-option__note {
	display: block;
	font-size: 13.5px;
	font-style: italic;
	color: #888;
}

/* --------------------------------------------------------------------- */
/* Mobile                                                                 */
/* --------------------------------------------------------------------- */

@media (max-width: 600px) {
	.ffl-selector {
		width: calc(100% - 1.5rem);
		margin: 1.25rem auto;
		padding: 1.5rem 1.25rem;
		border-radius: 12px;
	}

	.ffl-selector__heading {
		font-size: 25px;
	}

	.ffl-selector--results-step .ffl-selector__heading {
		font-size: 21px;
	}

	.ffl-selector__zip-form {
		flex-direction: column;
		align-items: stretch;
	}

	.ffl-selector__submit {
		width: 100%;
	}

	.ffl-selector__options {
		max-height: 60vh;
	}

	.ffl-option {
		padding: 1rem 1.1rem;
	}

	.ffl-option__title {
		font-size: 18px;
	}
}