/**
 * Sam Registration Fields — front end
 *
 * Colours are expressed as custom properties so a theme can restyle the whole
 * block by overriding a few variables instead of fighting specificity.
 */

.sff-wrap {
	--sff-accent: #b8860b;
	--sff-accent-soft: #fdf6e6;
	--sff-border: #e4c98a;
	--sff-border-hover: #d4a94a;
	--sff-text: #2b2b2b;
	--sff-muted: #8a8a8a;
	--sff-radius: 9px;

	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 4px 0 0;
	box-sizing: border-box;
}

.sff-wrap *,
.sff-wrap *::before,
.sff-wrap *::after { box-sizing: border-box; }

.sff-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sff-full { grid-column: 1 / -1; }
.sff-half { grid-column: span 1; }
.sff-field[hidden] { display: none; }

/* Labels ------------------------------------------------------------ */
.sff-label {
	font-size: 13px;
	font-weight: 600;
	color: #3a3a3a;
	letter-spacing: .2px;
	line-height: 1.4;
}
.sff-req { color: #c0392b; font-style: normal; margin-inline-start: 3px; }
.sff-help { font-size: 12px; color: var(--sff-muted); line-height: 1.45; }

/* Section heading --------------------------------------------------- */
.sff-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}
.sff-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--sff-border), transparent);
}
.sff-heading-text {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .9px;
	color: var(--sff-accent);
	white-space: nowrap;
}
.sff-heading-sub { margin: 0; font-size: 12.5px; color: var(--sff-muted); line-height: 1.5; }

.sff-note {
	font-size: 13px;
	line-height: 1.6;
	color: #555;
	background: #fafafa;
	border-inline-start: 3px solid var(--sff-border);
	border-radius: 6px;
	padding: 12px 14px;
}

/* Inputs ------------------------------------------------------------ */
.sff-input {
	width: 100%;
	height: 50px;
	border: 1.5px solid var(--sff-border);
	background: #fff;
	color: var(--sff-text);
	border-radius: var(--sff-radius);
	padding: 0 16px;
	font-size: 14.5px;
	font-family: inherit;
	line-height: normal;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sff-input:hover { border-color: var(--sff-border-hover); }
.sff-input:focus {
	outline: none;
	border-color: var(--sff-accent);
	box-shadow: 0 0 0 3px rgba(184, 134, 11, .13);
}
.sff-input::placeholder { color: #9a9a9a; opacity: 1; }

textarea.sff-input {
	height: auto;
	min-height: 96px;
	padding: 14px 16px;
	resize: vertical;
	line-height: 1.55;
}

/* Select ------------------------------------------------------------ */
.sff-select-wrap { position: relative; }
.sff-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-inline-end: 42px;
	cursor: pointer;
}
.sff-icon-chevron {
	position: absolute;
	top: 50%;
	inset-inline-end: 16px;
	transform: translateY(-50%);
	color: var(--sff-accent);
	pointer-events: none;
}

/* Choice cards ------------------------------------------------------ */
.sff-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.sff-cards-rich .sff-card { flex: 1 1 240px; align-items: flex-start; }

.sff-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 190px;
	min-width: 0;
	border: 1.5px solid var(--sff-border);
	border-radius: 10px;
	padding: 14px 16px;
	background: #fffdf7;
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sff-card:hover { border-color: var(--sff-border-hover); background: #fffaf0; }

.sff-card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.sff-card-dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #d8c19a;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sff-card-dot-square { border-radius: 5px; }
.sff-cards-rich .sff-card-dot { margin-top: 2px; }

.sff-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sff-card-text { font-size: 14px; font-weight: 600; color: var(--sff-text); line-height: 1.35; }
.sff-card-sub { font-size: 12.5px; color: var(--sff-muted); line-height: 1.4; }
.sff-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.sff-tag {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f0ece1;
	color: #7a6a3f;
	white-space: nowrap;
}
.sff-tag-low { background: #fdeee8; color: #b8501f; }
.sff-tag-full { background: #eee; color: #888; }
.sff-tag-price { background: #eaf5ec; color: #2c6e3f; }

/* Selected state.
   The sibling rule covers every browser; :has() additionally styles the whole
   card. A JS fallback adds .is-checked for engines without :has() support. */
.sff-card input:checked ~ .sff-card-dot,
.sff-card.is-checked .sff-card-dot,
.sff-card:has(input:checked) .sff-card-dot {
	background: var(--sff-accent);
	border-color: var(--sff-accent);
	color: #fff;
}
.sff-card.is-checked,
.sff-card:has(input:checked) {
	border-color: var(--sff-accent);
	background: var(--sff-accent-soft);
	box-shadow: 0 0 0 3px rgba(184, 134, 11, .10);
}

.sff-card.is-full {
	opacity: .55;
	cursor: not-allowed;
	background: #f7f7f7;
}
.sff-card.is-full:hover { border-color: var(--sff-border); }

/* Consent ----------------------------------------------------------- */
.sff-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.5;
	color: #444;
}
.sff-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.sff-consent-box {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 2px solid #d8c19a;
	border-radius: 5px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	transition: all .15s ease;
}
.sff-consent input:checked ~ .sff-consent-box,
.sff-consent.is-checked .sff-consent-box {
	background: var(--sff-accent);
	border-color: var(--sff-accent);
	color: #fff;
}

/* Order details table ----------------------------------------------- */
.sff-details-table th { width: 40%; }

/* Responsive -------------------------------------------------------- */
@media (max-width: 767px) {
	.sff-wrap { grid-template-columns: 1fr; }
	.sff-half { grid-column: 1 / -1; }
	.sff-card { flex: 1 1 100%; }
}

/* Respect reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sff-input, .sff-card, .sff-card-dot, .sff-consent-box { transition: none; }
}