/* ============================================================
   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; }
}

/* ===== Product-page Delivery/Pickup chooser ===== */
.lff-fulfil-choice { margin: 18px 0 8px; }
.lff-fulfil-choice-label {
	display: block; font-weight: 700; font-size: 15px;
	margin-bottom: 10px; color: #2f4f3a;
}
.lff-fulfil-choice-btns {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	max-width: 460px;
}
.lff-fc-opt {
	display: flex; align-items: center; justify-content: center;
	padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 15px;
	color: #555; margin: 0; user-select: none; text-align: center;
	border: 1.5px solid #dcdcd6; border-radius: 12px; background: #fff;
	transition: all .15s ease;
}
.lff-fc-opt:hover { border-color: var(--lff-accent,#8a9a5b); }
.lff-fc-opt input { display: none; }
.lff-fc-opt.lff-fc-active {
	background: var(--lff-accent,#8a9a5b); color: #fff;
	border-color: var(--lff-accent,#8a9a5b);
}
.lff-fulfil-choice-note {
	font-size: 13px; color: #888; margin: 10px 0 0; font-style: italic;
}


/* Disabled method option + unavailable note */
.lff-fc-opt.lff-fc-disabled { opacity:.45; cursor:not-allowed; background:#f3f3f0; }
.lff-fc-opt.lff-fc-disabled:hover { border-color:#dcdcd6; }
.lff-fulfil-unavailable { font-size:13px; color:#b3541e; margin:8px 0 0; }

/* Card message character counter */
.lff-charcount { font-size: 12px; color: #888; text-align: right; margin-top: 4px; }
.lff-charcount-max { color: #b3541e; font-weight: 600; }

/* Out-of-stock tile label. Deliberately not a link: it must not look clickable,
   because the whole point is telling the customer before they click. */
.lff-out-of-stock{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  background:#e9e9e9 !important;
  color:#555 !important;
  border:1px solid #d5d5d5 !important;
}