/* Checkout form — v3 (step-mark header, accent rail document, underline fields) — unique vs v1/v2 */

.checkout-form--v3 {
	--cf3-brand: var(--primary-brand-color, #8b5a3c);
	--cf3-brand-2: var(--secondary-brand-color, var(--cf3-brand));
	--cf3-ink: var(--primary-title-color, #1a1410);
	--cf3-muted: color-mix(in srgb, var(--primary-text-color, #4a4540) 88%, transparent);
	--cf3-line: color-mix(in srgb, var(--cf3-brand) 22%, transparent);
	--cf3-paper: color-mix(in srgb, var(--primary-background-color, #fff) 97%, var(--cf3-brand) 3%);
	/* Spacing rhythm (aligned to rail + content) */
	--cf3-pad-doc-y: clamp(1.1rem, 3vw, 1.65rem);
	/* inline-start = side with accent rail (4px bar + gap) */
	--cf3-pad-doc-x-start: clamp(1.35rem, 3.5vw, 2rem);
	--cf3-pad-doc-x-end: clamp(1.15rem, 3vw, 1.75rem);
	--cf3-row-y: clamp(1.05rem, 2.5vw, 1.4rem);
	--cf3-row-gap: clamp(0.55rem, 1.5vw, 0.75rem);
	--cf3-head-gap: clamp(1.5rem, 4vw, 2.25rem);
}

.cf-v3 {
	width: 100%;
}

/* —— Header: step mark + copy (replaces hairline kicker) —— */
.cf-v3__head {
	margin-bottom: var(--cf3-head-gap);
	padding: clamp(1rem, 2.5vw, 1.35rem) clamp(0.85rem, 2vw, 1.1rem);
	border-radius: 12px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--primary-background-color, #fff) 100%, transparent),
		color-mix(in srgb, var(--cf3-brand) 6%, var(--primary-background-color, #fff))
	);
	border: 1px solid var(--sc-checkout-form-v3-cf-v3-head-border, color-mix(in srgb, var(--cf3-line) 85%, transparent));
	box-shadow: 0 8px 28px rgba(15, 12, 10, 0.04);
}

.cf-v3__head-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

[dir="rtl"] .cf-v3__head-inner {
	flex-direction: row-reverse;
}

.cf-v3__head-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	gap: 0.65rem;
	padding-top: 0.15rem;
}

.cf-v3__head-step {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0.45rem 0.5rem;
	font-size: clamp(1.35rem, 3vw, 1.6rem);
	font-weight: 200;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--sc-checkout-form-v3-cf-v3-head-step-text, color-mix(in srgb, var(--cf3-brand) 55%, var(--cf3-ink)));
	border: 1px solid var(--sc-checkout-form-v3-cf-v3-head-step-border, color-mix(in srgb, var(--cf3-brand) 35%, transparent));
	border-radius: 10px;
	background: var(--sc-checkout-form-v3-cf-v3-head-step-bg, color-mix(in srgb, var(--primary-background-color, #fff) 92%, var(--cf3-brand) 8%));
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent);
}

.cf-v3__head-rule {
	width: 2px;
	flex: 1;
	min-height: 1.5rem;
	max-height: 3.5rem;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--cf3-brand), var(--cf3-brand-2));
	opacity: 0.55;
}

.cf-v3__head-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	text-align: start;
}

[dir="rtl"] .cf-v3__head-body {
	text-align: end;
}

.cf-v3__head-eyebrow {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sc-checkout-form-v3-cf-v3-head-eyebrow-text, color-mix(in srgb, var(--cf3-brand) 75%, var(--cf3-ink)));
}

.cf-v3__title {
	margin: 0;
	font-size: clamp(1.65rem, 3vw, 2.05rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.18;
	color: var(--sc-checkout-form-v3-cf-v3-title-text, var(--cf3-ink));
}

.cf-v3__tagline {
	margin: 0;
	padding-top: 0.1rem;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--sc-checkout-form-v3-cf-v3-tagline-text, var(--cf3-muted));
	max-width: 40ch;
}

@media (max-width: 479px) {
	.cf-v3__head-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.cf-v3__head-mark {
		flex-direction: row;
		align-items: center;
		padding-top: 0;
		gap: 0.85rem;
	}

	.cf-v3__head-rule {
		width: clamp(2.5rem, 18vw, 4rem);
		height: 2px;
		min-height: 0;
		max-height: none;
		flex: none;
		background: linear-gradient(90deg, var(--cf3-brand), var(--cf3-brand-2));
	}

	.cf-v3__head-body {
		text-align: center;
		align-items: center;
	}

	.cf-v3__tagline {
		margin-inline: auto;
	}
}

/* —— Document block: solid accent rail + “paper” —— */
.cf-v3__document {
	position: relative;
	padding-block: var(--cf3-pad-doc-y);
	/* Rail (4px) + comfortable gutter — logical so LTR/RTL stay balanced */
	padding-inline-start: calc(4px + var(--cf3-pad-doc-x-start));
	padding-inline-end: var(--cf3-pad-doc-x-end);
	background: var(--cf3-paper);
	border-radius: 0 12px 12px 0;
	box-shadow: 0 16px 40px rgba(15, 12, 10, 0.06);
}

.cf-v3__document::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--cf3-brand), var(--cf3-brand-2));
}

[dir="rtl"] .cf-v3__document {
	border-radius: 12px 0 0 12px;
}

[dir="rtl"] .cf-v3__document::before {
	border-radius: 4px 0 0 4px;
}

.cf-v3__rows {
	padding: 0.15rem 0 0.05rem;
}

/* —— Rows: table-like rules —— */
.cf-v3__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cf3-row-gap);
	padding: var(--cf3-row-y) 0;
	border-bottom: 1px solid var(--sc-checkout-form-v3-cf-v3-row-border-bottom, color-mix(in srgb, var(--cf3-line) 65%, transparent));
}

.cf-v3__row:last-child {
	border-bottom: none;
}

@media (min-width: 640px) {
	.cf-v3__row {
		grid-template-columns: minmax(120px, 32%) minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(1.25rem, 3vw, 2rem);
		row-gap: 0.35rem;
	}

	.cf-v3__row--stack {
		align-items: start;
	}

	.cf-v3__row--stack .cf-v3__label {
		padding-top: 0.65rem;
	}
}

.cf-v3__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--sc-checkout-form-v3-cf-v3-label-text, color-mix(in srgb, var(--cf3-ink) 88%, var(--cf3-brand)));
	line-height: 1.35;
}

@media (min-width: 640px) {
	.cf-v3__label {
		text-align: end;
	}
}

[dir="rtl"] .cf-v3__label {
	text-align: start;
}

.cf-v3__control {
	min-width: 0;
}

/* Underline text inputs */
.cf-v3__input:not(.cf-v3__input--select) {
	width: 100%;
	padding: 0.65rem 0 0.6rem;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--sc-checkout-form-v3-cf-v3-input-text, var(--cf3-ink));
	background: var(--sc-checkout-form-v3-cf-v3-input-bg, transparent);
	border: none;
	border-bottom: 1px solid var(--cf3-line);
	border-radius: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf-v3__input:not(.cf-v3__input--select)::placeholder {
	color: var(--sc-checkout-form-v3-cf-v3-input-placeholder-text, color-mix(in srgb, var(--cf3-muted) 90%, transparent));
}

.cf-v3__input:not(.cf-v3__input--select):hover {
	border-bottom-color: var(--sc-checkout-form-v3-cf-v3-input-hover-border-bottom, color-mix(in srgb, var(--cf3-brand) 45%, transparent));
}

.cf-v3__input:not(.cf-v3__input--select):focus {
	outline: none;
	border-bottom-width: 2px;
	border-bottom-color: var(--sc-checkout-form-v3-cf-v3-input-focus-border-bottom, var(--cf3-brand));
	box-shadow: 0 8px 20px color-mix(in srgb, var(--cf3-brand) 12%, transparent);
}

/* Native select — underline */
.cf-v3__select {
	position: relative;
}

.cf-v3__input--select {
	width: 100%;
	padding: 0.65rem 2.25rem 0.6rem 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--sc-checkout-form-v3-cf-v3-input-select-text, var(--cf3-ink));
	background: var(--sc-checkout-form-v3-cf-v3-input-select-bg, transparent);
	border: none;
	border-bottom: 1px solid var(--cf3-line);
	border-radius: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease;
}

.cf-v3__select::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-40%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--cf3-brand);
	pointer-events: none;
	opacity: 0.65;
}

.cf-v3__input--select:focus {
	outline: none;
	border-bottom-width: 2px;
	border-bottom-color: var(--sc-checkout-form-v3-cf-v3-input-select-focus-border-bottom, var(--cf3-brand));
}

[dir="rtl"] .cf-v3__input--select {
	padding-inline: 0 2.25rem;
}

/* Delivery hint */
.checkout-form--v3 .delivery-time-info,
.cf-v3__delivery {
	display: none;
	margin-top: 0.85rem;
	padding: 0.65rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--sc-checkout-form-v3-delivery-time-info-text, var(--cf3-muted));
	border-top: 1px dashed var(--sc-checkout-form-v3-delivery-time-info-border-top, color-mix(in srgb, var(--cf3-line) 80%, transparent));
}

.checkout-form--v3 .delivery-time-info i,
.cf-v3__delivery i {
	margin-inline-end: 0.4rem;
	color: var(--sc-checkout-form-v3-delivery-time-info-icon-text, var(--cf3-brand));
	font-size: 0.9em;
}

/* Searchable city */
.checkout-form--v3 .cf-v3__searchable.searchable-select {
	position: relative;
	width: 100%;
}

.checkout-form--v3 .searchable-select-input {
	position: relative;
	cursor: pointer;
}

.checkout-form--v3 .searchable-select-input input {
	width: 100%;
	padding: 0.65rem 2.25rem 0.6rem 0;
	font-size: 1rem !important;
	line-height: 1.45;
	color: var(--sc-checkout-form-v3-searchable-select-input-input-text, var(--cf3-ink));
	background: var(--sc-checkout-form-v3-searchable-select-input-input-bg, transparent);
	border: none;
	border-bottom: 1px solid var(--cf3-line);
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-form--v3 .searchable-select-input input:focus {
	outline: none;
	border-bottom-width: 2px;
	border-bottom-color: var(--sc-checkout-form-v3-searchable-select-input-input-focus-border-bottom, var(--cf3-brand));
	box-shadow: 0 8px 20px color-mix(in srgb, var(--cf3-brand) 10%, transparent);
}

.checkout-form--v3 .searchable-select-input.selected input {
	border-bottom-color: var(--sc-checkout-form-v3-searchable-select-input-input-selected-border-bottom, color-mix(in srgb, var(--cf3-brand) 55%, transparent));
}

.checkout-form--v3 .searchable-select-input i {
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sc-checkout-form-v3-searchable-select-input-icon-text, var(--cf3-brand));
	pointer-events: none;
	font-size: 0.8rem;
	opacity: 0.75;
}

.checkout-form--v3 .searchable-select-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--sc-checkout-form-v3-searchable-select-dropdown-bg, var(--primary-background-color, #fff));
	border: 1px solid var(--cf3-line);
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba(15, 12, 10, 0.12);
	z-index: 1000;
	max-height: 300px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#city-dropdown {
	display: none;
}

.checkout-form--v3 .searchable-select-search {
	padding: 0.6rem 0.65rem;
	border-bottom: 1px solid var(--sc-checkout-form-v3-searchable-select-search-border-bottom, color-mix(in srgb, var(--cf3-line) 70%, transparent));
	background: var(--sc-checkout-form-v3-searchable-select-search-bg, color-mix(in srgb, var(--cf3-paper) 100%, transparent));
}

.checkout-form--v3 .searchable-select-search input {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--cf3-line);
	border-radius: 6px;
	font-size: 16px !important;
	background: var(--sc-checkout-form-v3-searchable-select-search-input-bg, var(--primary-background-color, #fff));
}

.checkout-form--v3 .searchable-select-search input:focus {
	outline: none;
	border-color: var(--sc-checkout-form-v3-searchable-select-search-input-focus-border, var(--cf3-brand));
}

.checkout-form--v3 .searchable-select-options {
	max-height: 250px;
	overflow-y: auto;
	padding: 0.35rem 0;
}

.checkout-form--v3 .searchable-select-option {
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	transition: background 0.15s ease;
	color: var(--sc-checkout-form-v3-searchable-select-option-text, var(--cf3-ink));
	font-size: 0.95rem;
}

.checkout-form--v3 .searchable-select-option:hover {
	background: var(--sc-checkout-form-v3-searchable-select-option-hover-bg, color-mix(in srgb, var(--cf3-brand) 8%, transparent));
}

.checkout-form--v3 .searchable-select-no-results {
	padding: 1rem;
	text-align: center;
	color: var(--sc-checkout-form-v3-searchable-select-no-results-text, var(--cf3-muted));
	font-size: 0.9rem;
}

.checkout-form--v3 .searchable-select-options::-webkit-scrollbar {
	width: 6px;
}

.checkout-form--v3 .searchable-select-options::-webkit-scrollbar-thumb {
	background: var(--sc-checkout-form-v3-searchable-select-options-bg, color-mix(in srgb, var(--cf3-brand) 35%, transparent));
	border-radius: 3px;
}

@media screen and (max-width: 768px) {
	.checkout-form--v3 .searchable-select-input input,
	.checkout-form--v3 .searchable-select-search input {
		font-size: 16px !important;
		-webkit-text-size-adjust: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cf-v3__input,
	.checkout-form--v3 .searchable-select-input input {
		transition: none;
	}
}

/* === theme colour controls: inherited values (generated) === */
.cf-v3__head-rule {
	color: var(--sc-checkout-form-v3-cf-v3-head-rule-text, inherit);
}
/* === end theme colour controls === */