/* ============================================================
   Lambert Florist Fields — clean neutral design (HARDENED)
   Every rule is anchored to .lff-fields and uses !important on
   properties commonly overridden by themes / custom form.cart
   CSS, so the plugin styling wins the cascade.
   ============================================================ */
.lff-fields {
	--lff-accent: #8a9a5b;
	--lff-accent-soft: #eef1e6;
	--lff-ink: #2f2f2c;
	--lff-muted: #6b6b66;
	--lff-line: #e3e1dc;
	--lff-surface: #f5f4f1;

	margin: 22px 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	background: none !important;
	padding: 0 !important;
	color: var(--lff-ink);
	font-size: 15px;
}
/* neutralize a parent form.cart > * spacing rule landing on us */
.lff-fields > * { margin-bottom: 0 !important; }

.lff-fields .lff-group-label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	margin: 0 0 8px !important;
	color: var(--lff-ink) !important;
	letter-spacing: .2px;
}
.lff-fields .lff-req { color: #c0392b; }
.lff-fields .lff-help {
	margin: -2px 0 10px !important;
	font-size: .85rem !important;
	color: var(--lff-muted) !important;
	font-weight: 400 !important;
}

/* ---- Card message ---- */
.lff-fields textarea {
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid var(--lff-line) !important;
	border-radius: 10px !important;
	font: inherit !important;
	background: #fff !important;
	box-sizing: border-box !important;
	resize: vertical !important;
	min-height: 96px !important;
}
.lff-fields textarea:focus {
	outline: none !important;
	border-color: var(--lff-accent) !important;
	box-shadow: 0 0 0 3px var(--lff-accent-soft) !important;
}

/* ---- select inside panels ---- */
.lff-fields select {
	width: 100% !important;
	max-width: 360px !important;
	padding: 11px 12px !important;
	border: 1px solid var(--lff-line) !important;
	border-radius: 10px !important;
	font: inherit !important;
	background: #fff !important;
	box-sizing: border-box !important;
}

/* ---- checkboxes ---- */
.lff-fields .lff-checks { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: center !important; }
.lff-fields .lff-check {
	display: flex !important; align-items: center !important; gap: 10px !important;
	cursor: pointer; padding: 4px 0;
	font-weight: 500 !important; margin: 0 !important;
}
.lff-fields .lff-check input { width: 18px !important; height: 18px !important; accent-color: var(--lff-accent); }

/* ============================================================
   Driver tip — options left ~40%, photo right ~60%, one row
   ============================================================ */
.lff-fields .lff-tip-rect {
	display: flex !important;
	flex-direction: row !important;
	border: 1px solid var(--lff-line) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #fff !important;
	align-items: stretch !important;
}
.lff-fields .lff-tip-left {
	flex: 0 0 42% !important;
	max-width: 42% !important;
	padding: 18px 20px !important;
	display: flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
}
.lff-fields .lff-tip-photo {
	flex: 1 1 58% !important;
	background: var(--lff-surface) !important;
	min-height: 200px !important;
}
.lff-fields .lff-tip-photo img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;  /* keep the face in frame */
	display: block !important;
}
.lff-fields .lff-tip-rect:not(.has-photo) .lff-tip-left { flex-basis: 100% !important; max-width: 100% !important; }

.lff-fields .lff-tip { width: 100% !important; }
.lff-fields .lff-tip-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
}
.lff-fields .lff-tip-opt { position: relative !important; margin: 0 !important; }
.lff-fields .lff-tip-opt[hidden] { display: none !important; }
.lff-fields .lff-tip-opt input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; }
.lff-fields .lff-tip-pill {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.1 !important;
	padding: 8px 18px !important;
	border: 1px solid var(--lff-line) !important;
	border-radius: 999px !important;
	cursor: pointer;
	font-weight: 600 !important;
	background: #fff !important;
	color: var(--lff-ink) !important;
	transition: all .12s ease;
	user-select: none;
	white-space: nowrap !important;
	min-width: 64px !important;
}
.lff-fields .lff-pill-amount { font-size: 1rem !important; font-weight: 700 !important; }
.lff-fields .lff-pill-pct { font-size: .7rem !important; font-weight: 500 !important; opacity: .7 !important; }
.lff-fields .lff-pill-pct:empty { display: none !important; }
.lff-fields .lff-tip-opt input:checked + .lff-tip-pill {
	background: var(--lff-accent) !important;
	border-color: var(--lff-accent) !important;
	color: #fff !important;
}
.lff-fields .lff-tip-opt input:checked + .lff-tip-pill .lff-pill-pct { opacity: .85 !important; }
/* Other -> $ field (replaces the Other pill in place) */
.lff-fields .lff-tip-other-wrap { display: inline-flex !important; align-items: center !important; }
.lff-fields .lff-tip-other-field { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.lff-fields .lff-tip-other-field[hidden] { display: none !important; }
.lff-fields .lff-tip-dollar { font-weight: 600 !important; color: var(--lff-muted) !important; }
.lff-fields .lff-tip-other {
	width: 88px !important;
	padding: 9px 12px !important;
	border: 1px solid var(--lff-accent) !important;
	border-radius: 999px !important;
	font: inherit !important;
	min-height: 0 !important;
	background: #fff !important;
}
/* Clear link — small, low-emphasis, only shown after a selection */
.lff-fields .lff-tip-clear {
	background: none !important;
	border: none !important;
	color: var(--lff-muted) !important;
	text-decoration: underline !important;
	cursor: pointer;
	font-size: .85rem !important;
	padding: 4px 6px !important;
	margin-left: 2px !important;
}
.lff-fields .lff-tip-clear[hidden] { display: none !important; }

/* ============================================================
   Add-ons — one grey box, tile row, options under the row
   ============================================================ */
.lff-fields .lff-addons-box {
	background: var(--lff-surface) !important;
	border: 1px solid var(--lff-line) !important;
	border-radius: 14px !important;
	padding: 18px !important;
	margin: 0 !important;
}
.lff-fields .lff-addons-heading {
	font-weight: 700 !important;
	font-size: 1rem !important;
	margin: 0 0 14px !important;
	text-align: center !important;
	color: var(--lff-ink) !important;
}
.lff-fields .lff-tile-row {
	display: flex !important;
	gap: 12px !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}
.lff-fields .lff-trigger-tile {
	flex: 1 1 0 !important;
	max-width: 140px !important;
	min-width: 96px !important;
	background: #fff !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	cursor: pointer;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 14px 10px !important;
	box-shadow: none !important;
	color: var(--lff-ink) !important;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.lff-fields .lff-trigger-tile:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07) !important; }
.lff-fields .lff-trigger-tile.lff-tile-active {
	border-color: var(--lff-accent) !important;
	box-shadow: 0 0 0 3px var(--lff-accent-soft) !important;
}
.lff-fields .lff-trigger-tile img,
.lff-fields .lff-tile-noimg {
	width: 64px !important; height: 64px !important;
	object-fit: contain !important;
	border-radius: 8px !important;
}
.lff-fields .lff-tile-noimg { background: var(--lff-surface) !important; display: block !important; }
.lff-fields .lff-tile-name { font-weight: 600 !important; font-size: .92rem !important; }

.lff-fields .lff-panel {
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--lff-line) !important;
}
.lff-fields .lff-panel[hidden] { display: none !important; }
.lff-fields .lff-panel .lff-group-label { text-align: center !important; }

/* option tiles inside a panel */
.lff-fields .lff-tiles { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; }
.lff-fields .lff-tile {
	width: 104px !important;
	background: #fff !important;
	border: 2px solid var(--lff-line) !important;
	border-radius: 10px !important;
	padding: 8px !important;
	text-align: center !important;
	cursor: pointer;
	position: relative !important;
}
.lff-fields .lff-tile img { width: 100% !important; height: 70px !important; object-fit: contain !important; }
.lff-fields .lff-tile input { position: absolute !important; top: 6px !important; left: 6px !important; accent-color: var(--lff-accent); }
.lff-fields .lff-tile-label { display: block !important; font-size: .85em !important; margin-top: 4px !important; }
.lff-fields .lff-tile-price { display: block !important; font-size: .8em !important; color: var(--lff-muted) !important; }
.lff-fields .lff-tile:has(input:checked) { border-color: var(--lff-accent) !important; background: var(--lff-accent-soft) !important; }

@media (max-width: 560px) {
	.lff-fields .lff-tip-rect { flex-direction: column !important; }
	.lff-fields .lff-tip-left { flex-basis: auto !important; max-width: 100% !important; width: 100% !important; }
	.lff-fields .lff-tip-photo {
		flex-basis: auto !important;
		width: 100% !important;
		aspect-ratio: 16 / 10 !important;   /* show the whole scene, no harsh crop */
		min-height: 0 !important;
	}
	.lff-fields .lff-tip-photo img { object-position: center 25% !important; }
	.lff-fields .lff-trigger-tile { max-width: none !important; }
}