/**
 * Freshly Picked public-facing styles.
 *
 * Brand:
 *   #E21C21 (red) — primary
 *   #147E35 (green) — accent
 *   Oleo Script (Google Font) — display headings
 *   Outfit (Google Font) — body
 *
 * Light mode only.
 */

/* Google Fonts loaded by theme; fallback if not. */
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script:wght@400;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ============================================================
   FORM CONTAINER
   ============================================================ */

.fp-form,
.fp-schedule {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #1a1a1a;
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
}

.fp-form__header {
	text-align: center;
	margin-bottom: 32px;
}

.fp-form__title {
	font-family: 'Oleo Script', cursive;
	font-size: 38px;
	color: #1a1a1a;
	margin: 0 0 8px;
	line-height: 1.1;
}

.fp-form__subtitle {
	font-size: 15px;
	color: #555;
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.5;
}

/* ============================================================
   PROGRESS INDICATOR
   ============================================================ */

.fp-form__progress {
	margin-bottom: 32px;
}

.fp-form__progress ol {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp-form__progress li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #999;
	transition: all 0.2s;
}

.fp-form__progress li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: #ddd;
	color: white;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.fp-form__progress li.is-active {
	background: #E21C21;
	color: white;
}

.fp-form__progress li.is-active span {
	background: white;
	color: #E21C21;
}

.fp-form__progress li.is-complete {
	background: #147E35;
	color: white;
}

.fp-form__progress li.is-complete span {
	background: white;
	color: #147E35;
}

/* ============================================================
   STEPS
   ============================================================ */

.fp-step {
	display: none;
	background: white;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.fp-step.is-active {
	display: block;
}

.fp-step__title {
	font-family: 'Oleo Script', cursive;
	font-size: 26px;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.fp-step__subtitle {
	font-size: 14px;
	color: #666;
	margin: 0 0 24px;
}

.fp-step__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #f0f0f0;
}

.fp-step__nav .fp-btn:only-child {
	margin-left: auto;
}

/* ============================================================
   FIELDS
   ============================================================ */

.fp-field {
	margin-bottom: 20px;
}

.fp-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fp-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #2a2a2a;
	margin-bottom: 6px;
	letter-spacing: 0.3px;
}

.fp-field input[type="text"],
.fp-field input[type="email"],
.fp-field input[type="tel"],
.fp-field input[type="number"],
.fp-field select {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	background: white;
	color: #1a1a1a;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.fp-field input:focus,
.fp-field select:focus {
	outline: none;
	border-color: #E21C21;
	box-shadow: 0 0 0 3px rgba(226, 28, 33, 0.12);
}

.fp-field select:disabled {
	background: #f5f5f5;
	color: #999;
	cursor: not-allowed;
}

.fp-field__address {
	margin: 6px 0 0;
	padding: 8px 12px;
	background: #ffffff;
	border-left: 3px solid #147E35;
	font-size: 13px;
	color: #555;
	border-radius: 4px;
}

.fp-field__address:empty {
	display: none;
}

.fp-field__hint {
	margin: 8px 0 0;
	padding: 10px 14px;
	background: #f4f9f6;
	border-left: 3px solid #147E35;
	border-radius: 4px;
	font-size: 13px;
	color: #2a4a3a;
	line-height: 1.5;
}

.fp-field__hint a {
	color: #147E35;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.fp-field__hint a:hover {
	color: #0e5b27;
}

/* ============================================================
   PRODUCTS
   ============================================================ */

.fp-products {
	display: grid;
	gap: 16px;
}

.fp-products__loading {
	color: #888;
	text-align: center;
	padding: 32px;
}

.fp-product-card {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	transition: border-color 0.2s;
}

.fp-product-card:hover {
	border-color: #E21C21;
}

.fp-product-card__media {
	position: relative;
}

.fp-product-card__media img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 6px;
}

.fp-product-card__media:empty {
	display: none;
}

.fp-product-card__name {
	font-family: 'Oleo Script', cursive;
	font-size: 22px;
	margin: 0 0 4px;
	color: #1a1a1a;
}

.fp-product-card__subtitle {
	font-size: 13px;
	color: #666;
	margin: 0 0 6px;
	font-weight: 500;
}

.fp-product-card__price {
	font-size: 18px;
	font-weight: 700;
	color: #E21C21;
	margin: 0 0 8px;
}

.fp-product-card__desc {
	font-size: 13px;
	color: #555;
	line-height: 1.5;
	margin: 0 0 12px;
}

.fp-product-card__unavailable {
	display: inline-block;
	padding: 6px 12px;
	background: #f0f0f0;
	color: #999;
	font-size: 12px;
	font-weight: 600;
	border-radius: 6px;
}

/* Quantity stepper */
.fp-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
}

.fp-qty button {
	background: transparent;
	border: 0;
	padding: 8px 14px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	cursor: pointer;
	transition: background 0.15s;
}

.fp-qty button:hover {
	background: #f5f5f5;
}

.fp-qty input {
	width: 50px;
	border: 0 !important;
	border-left: 1.5px solid #e0e0e0 !important;
	border-right: 1.5px solid #e0e0e0 !important;
	border-radius: 0 !important;
	text-align: center;
	font-weight: 600;
	background: white;
	padding: 8px 0 !important;
	box-shadow: none !important;
}

.fp-qty input:focus {
	outline: none;
	background: #fffbe5;
}

/* ============================================================
   PRODUCT VARIANTS (rows inside a card)
   ============================================================ */

.fp-variants {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.fp-variant {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #ece8d8;
	border-radius: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.fp-variant:hover {
	border-color: #d8d2bb;
}

.fp-variant.is-selected {
	border-color: #E21C21;
	box-shadow: 0 0 0 1px #E21C21;
	background: #fffaf9;
}

.fp-variant__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fp-variant__label {
	font-weight: 700;
	font-size: 15px;
	color: #1a1a1a;
	line-height: 1.3;
}

.fp-variant__sub {
	font-size: 12px;
	color: #777;
	font-weight: 500;
}

.fp-variant__pricing {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 2px;
	font-size: 14px;
}

.fp-variant__price {
	font-weight: 700;
	color: #E21C21;
	font-size: 16px;
}

.fp-variant__walkup {
	font-size: 12px;
	color: #999;
	text-decoration: line-through;
	font-weight: 500;
}

.fp-variant__action {
	flex-shrink: 0;
}

.fp-variant__unavailable {
	display: inline-block;
	padding: 6px 12px;
	background: #f0f0f0;
	color: #777;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.fp-variant {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
	.fp-variant__action {
		justify-self: stretch;
	}
	.fp-variant__action .fp-qty {
		width: 100%;
		justify-content: space-between;
	}
}

/* ============================================================
   COMING SOON STATE (whole card)

   When any variant in a group has a coming_soon_message set, the
   card renders identically to a normal card — image, name, description,
   price, qty stepper all visible — but faded out and non-interactive.
   Customer can see what's coming. Can't order it. Clearing the message
   field on the product makes the card interactive again.

   The message itself is NOT displayed. The field is just the toggle.
   ============================================================ */

.fp-product-card.is-coming-soon {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.fp-product-card.is-coming-soon:hover {
	border-color: #ececec;
}

/* ============================================================
   CART SUMMARY
   ============================================================ */

.fp-cart-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	padding: 16px 20px;
	background: #1a1a1a;
	color: white;
	border-radius: 8px;
}

.fp-cart-summary__label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	opacity: 0.85;
}

.fp-cart-summary__amount {
	font-family: 'Oleo Script', cursive;
	font-size: 28px;
	color: #E21C21;
	background: white;
	padding: 4px 16px;
	border-radius: 6px;
	min-width: 100px;
	text-align: center;
}

/* ============================================================
   CONSENT
   ============================================================ */

.fp-consent {
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fp-checkbox {
	display: flex;
	gap: 10px;
	padding: 12px;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	cursor: pointer;
	align-items: flex-start;
}

.fp-checkbox input {
	margin: 2px 0 0;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: #E21C21;
}

.fp-checkbox span {
	font-size: 14px;
	line-height: 1.4;
	color: #2a2a2a;
}

.fp-checkbox small {
	display: block;
	font-size: 11px;
	color: #888;
	margin-top: 2px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.fp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
	transition: transform 0.1s, background 0.15s, opacity 0.2s;
	text-decoration: none;
}

.fp-btn:active {
	transform: translateY(1px);
}

.fp-btn--primary {
	background: #E21C21;
	color: white;
}

.fp-btn--primary:hover {
	background: #B81418;
}

.fp-btn--ghost {
	background: transparent;
	color: #666;
	border: 1.5px solid #e0e0e0;
}

.fp-btn--ghost:hover {
	border-color: #999;
	color: #1a1a1a;
}

.fp-btn--submit {
	font-size: 15px;
	padding: 14px 28px;
}

.fp-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============================================================
   HONEYPOT
   ============================================================ */

.fp-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
   FEEDBACK
   ============================================================ */

.fp-submit-feedback {
	margin: 20px 0;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
}

.fp-submit-feedback[data-type="success"] {
	background: #e8f5ec;
	border: 1.5px solid #147E35;
}

.fp-submit-feedback[data-type="error"] {
	background: #fdeaea;
	border: 1.5px solid #E21C21;
}

.fp-submit-feedback__inner {
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 500;
	color: #1a1a1a;
}

.fp-form-closed {
	padding: 32px;
	text-align: center;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 12px;
	color: #555;
}

/* ============================================================
   SCHEDULE PAGE
   ============================================================ */

.fp-schedule__header {
	text-align: center;
	margin-bottom: 32px;
}

.fp-schedule__title {
	font-family: 'Oleo Script', cursive;
	font-size: 42px;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.fp-schedule__subtitle {
	font-size: 15px;
	color: #555;
	margin: 0 0 20px;
}

.fp-schedule__search {
	max-width: 480px;
	margin: 0 auto 16px;
}

.fp-schedule__search input {
	width: 100%;
	padding: 14px 20px;
	font-size: 15px;
	border: 1.5px solid #e0e0e0;
	border-radius: 999px;
	background: white;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.fp-schedule__search input:focus {
	outline: none;
	border-color: #E21C21;
	box-shadow: 0 0 0 3px rgba(226, 28, 33, 0.12);
}

.fp-schedule__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.fp-schedule__filter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #555;
	margin-right: 4px;
}

.fp-pill {
	background: white;
	border: 1.5px solid #e0e0e0;
	color: #555;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s;
}

.fp-pill:hover {
	border-color: #999;
}

.fp-pill.is-active {
	background: #1a1a1a;
	color: white;
	border-color: #1a1a1a;
}

.fp-schedule__count {
	margin-left: auto;
	font-size: 11px;
	color: #888;
}

.fp-schedule__list {
	display: flex;
	flex-direction: column;
}

.fp-stop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 20px;
	gap: 16px;
	border-bottom: 1px solid #f0f0f0;
	flex-wrap: wrap;
}

.fp-stop__info {
	flex: 1 1 200px;
}

.fp-stop__city {
	font-family: 'Oleo Script', cursive;
	font-size: 24px;
	margin: 0;
	color: #1a1a1a;
}

.fp-stop__state {
	color: #999;
	font-size: 18px;
	font-weight: normal;
}

.fp-stop__location {
	font-size: 13px;
	color: #666;
	margin: 2px 0 0;
}

.fp-stop__address {
	color: #999;
}

.fp-stop__visits {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.fp-stop__visit {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 14px;
	background: white;
	border: 1.5px solid #E21C21;
	color: #E21C21;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	transition: background 0.15s, color 0.15s;
	min-width: 90px;
}

.fp-stop__visit:hover {
	background: #E21C21;
	color: white;
}

.fp-stop__visit-day {
	font-size: 10px;
	letter-spacing: 1px;
	opacity: 0.75;
	text-transform: uppercase;
}

.fp-stop__visit-date {
	font-size: 14px;
	line-height: 1.1;
}

.fp-stop__visit-time {
	font-size: 10px;
	opacity: 0.7;
	margin-top: 2px;
}

.fp-schedule__no-match,
.fp-schedule__empty {
	text-align: center;
	padding: 48px 24px;
	color: #999;
	font-size: 15px;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media ( max-width: 600px ) {
	.fp-form__title {
		font-size: 30px;
	}
	.fp-form__progress li {
		font-size: 11px;
		padding: 8px 10px;
	}
	.fp-form__progress li span {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}
	.fp-step {
		padding: 20px;
	}
	.fp-field-row {
		grid-template-columns: 1fr;
	}
	.fp-product-card {
		grid-template-columns: 80px 1fr;
		gap: 12px;
	}
	.fp-product-card__media img {
		height: 80px;
	}
	.fp-stop {
		flex-direction: column;
		align-items: flex-start;
	}
	.fp-stop__visits {
		width: 100%;
	}
}