/**
 * Checkout page styles — BEM with --dtec-* tokens.
 * Two-column layout: left = form sections, right = sticky sidebar.
 */

/* --- Login prompt --- */

.dtec-checkout-login {
	max-width: var(--dtec-max-width-sm);
	margin: var(--space-3xl) auto;
	padding: var(--space-xl);
	text-align: center;
	background: var(--dtec-bg);
	border: 1px solid var(--dtec-border);
	border-radius: var(--dtec-radius-lg);
}

.dtec-checkout-login h2 {
	font-family: var(--dtec-font-family);
	font-size: var(--text-2xl);
	font-weight: var(--dtec-font-bold);
	color: var(--dtec-text);
	margin: 0 0 var(--space-s);
}

.dtec-checkout-login p {
	font-size: var(--text-m);
	color: var(--dtec-text-muted);
	margin: 0 0 var(--space-l);
}

.dtec-checkout-login__btn {
	display: inline-block;
	padding: var(--space-s) var(--space-l);
	margin: 0 var(--space-2xs);
	font-family: var(--dtec-font-family);
	font-size: var(--text-m);
	font-weight: var(--dtec-font-semibold);
	text-decoration: none;
	border-radius: var(--dtec-radius-md);
	transition: background var(--dtec-duration-fast) var(--dtec-ease-default),
	            color var(--dtec-duration-fast) var(--dtec-ease-default);
	background: var(--dtec-primary);
	color: var(--dtec-white);
}

.dtec-checkout-login__btn:hover {
	background: var(--dtec-primary-hover);
	color: var(--dtec-white);
}

.dtec-checkout-login__btn--secondary {
	background: transparent;
	color: var(--dtec-primary);
	border: 1px solid var(--dtec-primary);
}

.dtec-checkout-login__btn--secondary:hover {
	background: var(--dtec-primary-light);
	color: var(--dtec-primary-hover);
}

/* --- Checkout layout --- */

.dtec-checkout {
	display: grid;
	gap: var(--space-xl);
	max-width: var(--dtec-max-width-xl);
	margin: 0 auto var(--space-xl);
	padding: 0 var(--space-m) var(--space-3xl);
	font-family: var(--dtec-font-family);
	color: var(--dtec-text);
	view-transition-name: step-content;
}

@media (min-width: 768px) {
	.dtec-checkout {
		grid-template-columns: 1fr 420px;
		align-items: start;
	}
}

@media (min-width: 1200px) {
	.dtec-checkout {
		grid-template-columns: 1fr 520px;
	}
}

.dtec-checkout__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

/* --- Shared card shell --- */

.dtec-checkout__card {
	background: var(--dtec-off-white-100);
	border: 1px solid rgba(46, 40, 38, 0.15);
	border-radius: 30px;
	padding: var(--space-3xl);
}

.dtec-checkout,
.dtec-checkout input,
.dtec-checkout button,
.dtec-checkout select,
.dtec-checkout textarea {
	font-family: var(--body-family, var(--dtec-font-family));
}

.dtec-checkout__card input,
.dtec-checkout__card textarea,
.dtec-checkout__card select {
	background: #ffffff !important;
}

.dtec-checkout__card-title {
	font-family: var(--heading-3-family, var(--dtec-font-family));
	font-size: var(--text-xl);
	font-weight: var(--heading-3-weight, var(--dtec-font-semibold));
	color: var(--dtec-text);
	margin: 0 0 clamp(36px, calc(var(--space-2xl) + var(--space-s)), 48px);
	padding-bottom: clamp(24px, calc(var(--space-l) + var(--space-2xs)), 32px);
	border-bottom: 1px solid var(--dtec-border);
}

/* Alias kept for any JS/PHP that already references it */
.dtec-checkout__section-title {
	font-family: var(--heading-3-family, var(--dtec-font-family));
	font-size: var(--text-xl);
	font-weight: var(--heading-3-weight, var(--dtec-font-semibold));
	margin: 0 0 clamp(36px, calc(var(--space-2xl) + var(--space-s)), 48px);
	padding-bottom: clamp(24px, calc(var(--space-l) + var(--space-2xs)), 32px);
	border-bottom: 1px solid var(--dtec-border);
}

/* --- Page heading --- */

.dtec-checkout__heading {
	margin-bottom: var(--space-2xs);
}

.dtec-checkout__heading-sub {
	font-size: var(--text-s);
	font-weight: var(--dtec-font-semibold);
	color: var(--dtec-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-3xs);
}

.dtec-checkout__heading-title {
	font-family: var(--heading-1-family, var(--dtec-font-family));
	font-size: var(--text-4xl);
	font-weight: var(--heading-1-weight, var(--dtec-font-bold));
	color: var(--dtec-text);
	margin: 0 0 var(--space-2xs);
	line-height: var(--dtec-leading-tight);
}

.dtec-checkout__heading-desc {
	font-size: var(--text-m);
	color: var(--dtec-text-muted);
	margin: 0;
}

/* --- Grid helpers (inside cards) --- */

.dtec-checkout__grid {
	display: grid;
	gap: var(--space-m);
}

.dtec-checkout__grid--2col {
	grid-template-columns: 1fr 1fr;
}

/* Address grid: street takes most space, suite is narrow */
.dtec-checkout__grid--addr {
	grid-template-columns: 1fr 1fr 1fr;
}

.dtec-checkout__field--addr-street {
	grid-column: 1 / 3;
}

.dtec-checkout__field--addr-suite {
	grid-column: 3 / 4;
}

@media (max-width: 600px) {
	.dtec-checkout__grid--2col,
	.dtec-checkout__grid--addr {
		grid-template-columns: 1fr;
	}

	.dtec-checkout__field--addr-street,
	.dtec-checkout__field--addr-suite {
		grid-column: auto;
	}
}

/* --- Form fields --- */

.dtec-checkout__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

/* Legacy span modifiers kept for backward compat */
.dtec-checkout__field--half  { grid-column: span 1; }
.dtec-checkout__field--quarter { grid-column: span 1; }

.dtec-checkout__field label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--dtec-text);
}

.dtec-checkout__field input,
.dtec-checkout__field textarea,
.dtec-checkout__field select {
	width: 100%;
	height: 50px;
	padding: 20px;
	font-family: var(--dtec-font-family);
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: rgba(46, 40, 38, 0.75);
	background: var(--dtec-white);
	border: 1px solid var(--dtec-border);
	border-radius: var(--dtec-radius-md);
	transition: border-color var(--dtec-duration-fast) var(--dtec-ease-default),
	            box-shadow var(--dtec-duration-fast) var(--dtec-ease-default);
	box-sizing: border-box;
}

.dtec-checkout__field textarea {
	height: auto;
	min-height: 100px;
}

.dtec-checkout__field input:focus,
.dtec-checkout__field textarea:focus,
.dtec-checkout__field select:focus {
	outline: none;
	border-color: var(--dtec-primary);
	box-shadow: 0 0 0 3px var(--dtec-primary-ring);
}

/* Legacy billing-grid kept for backward compat — sits inside .dtec-checkout__billing */
.dtec-checkout__billing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: var(--space-m);
}

/* --- Password fields with eye toggle --- */

.dtec-checkout__password-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.dtec-checkout__account-inline {
	margin-top: var(--space-s);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.dtec-checkout__account-message {
	margin: 0;
	font-size: var(--text-s);
	color: var(--dtec-text-muted);
	line-height: 1.5;
}

.dtec-checkout__checkbox-label--account {
	margin-top: 0;
}

.dtec-checkout__collapsible {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-6px);
	transition:
		max-height 240ms var(--dtec-ease-default),
		opacity 180ms var(--dtec-ease-default),
		transform 240ms var(--dtec-ease-default),
		margin-top 240ms var(--dtec-ease-default);
	margin-top: 0;
	pointer-events: none;
}

.dtec-checkout__collapsible.is-open {
	max-height: var(--dtec-checkout-collapsible-max-height, 999px);
	opacity: 1;
	transform: translateY(0);
	margin-top: var(--dtec-checkout-collapsible-open-margin, var(--space-2xs));
	pointer-events: auto;
}

.dtec-checkout__collapsible-inner {
	padding-top: 1px;
}

.dtec-checkout__account-passwords {
	--dtec-checkout-collapsible-open-margin: var(--space-2xs);
}

.dtec-checkout__password-wrap input {
	padding-right: 2.75rem;
}

.dtec-checkout__password-toggle {
	position: absolute;
	right: var(--space-s);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--dtec-text-muted);
	line-height: 0;
	transition: color var(--dtec-duration-fast) var(--dtec-ease-default);
}

.dtec-checkout__password-toggle:hover {
	color: var(--dtec-text);
}

.dtec-checkout__eye-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* --- Delivery instructions --- */

.dtec-checkout__instructions {
	margin-top: var(--space-l);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.dtec-checkout__instructions label {
	font-size: var(--text-s);
	font-weight: var(--dtec-font-medium);
	color: var(--dtec-text);
}

.dtec-checkout__instructions textarea {
	width: 100%;
	padding: var(--space-s);
	font-family: var(--dtec-font-family);
	font-size: var(--text-m);
	color: var(--dtec-text);
	background: var(--dtec-bg);
	border: 1px solid var(--dtec-border);
	border-radius: var(--dtec-radius-md);
	resize: vertical;
	box-sizing: border-box;
	transition: border-color var(--dtec-duration-fast) var(--dtec-ease-default),
	            box-shadow var(--dtec-duration-fast) var(--dtec-ease-default);
}

.dtec-checkout__instructions textarea:focus {
	outline: none;
	border-color: var(--dtec-primary);
	box-shadow: 0 0 0 3px var(--dtec-primary-ring);
}

.dtec-checkout__instructions-hint {
	font-size: var(--text-xs);
	color: var(--dtec-text-muted);
	margin: 0;
}

/* --- "Same as billing" checkbox --- */

.dtec-checkout__checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-m);
	cursor: pointer;
	user-select: none;
	margin-bottom: 0;
}

.dtec-checkout__checkbox-label input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--dtec-primary);
	flex-shrink: 0;
	cursor: pointer;
}

label#dtec-checkout-guest-row span {
	font-weight: 500;
	position: relative;
	top: 1px;
}

.dtec-checkout__sms-consent {
	--dtec-checkout-collapsible-open-margin: var(--space-s);
}

.dtec-checkout__sms-consent-label {
	align-items: flex-start;
	gap: var(--space-s);
	padding: var(--space-m);
	background: rgba(143, 56, 93, 0.06);
	border: 1px solid rgba(143, 56, 93, 0.18);
	border-radius: 14px;
	font-size: var(--text-s);
	line-height: 1.45;
	color: var(--dtec-text-muted, rgba(46, 40, 38, 0.72));
}

.dtec-checkout__sms-consent-label input[type="checkbox"] {
	margin-top: 0.12em;
}

/* --- Delivery address — conditionally shown --- */

.dtec-checkout__delivery-addr {
	--dtec-checkout-collapsible-open-margin: var(--space-m);
}

/* --- Charity section — split header/content --- */

.dtec-checkout__card.dtec-checkout__charity-card {
	padding: 0;
	overflow: hidden;
}

.dtec-checkout__charity-header {
	padding: var(--space-3xl);
	background: var(--dtec-off-white-100);
}

.dtec-checkout__charity-header .dtec-checkout__card-title {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: var(--space-2xs);
}

.dtec-checkout__charity-desc {
	color: var(--medium-gray---paragraph, rgba(46, 40, 38, 0.75));
	font-family: var(--body-family, var(--dtec-font-family));
	font-size: 16px;
	font-style: normal;
	font-weight: var(--dtec-font-semibold);
	line-height: normal;
	margin: 0;
}

.dtec-checkout__charity-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: 40px 60px;
	background: var(--dtec-white);
}

.dtec-checkout__charity-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 20px;
	justify-content: center;
	border: 2px solid var(--dtec-border);
	border-radius: var(--dtec-radius-md);
	cursor: pointer;
	background: var(--dtec-white);
	transition:
		border-color 250ms ease,
		border-width 250ms ease,
		transform 250ms ease,
		box-shadow 250ms ease,
		background-color 250ms ease;
}

.dtec-checkout__charity-option:hover {
	border-color: var(--dtec-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(143, 56, 93, 0.15);
}

.dtec-checkout__charity-option:has(input:checked) {
	border-color: var(--dtec-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(143, 56, 93, 0.2);
}

.dtec-checkout__charity-option input[type="radio"] {
	display: none;
}

.dtec-checkout__charity-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: contain;
	flex-shrink: 0;
}

/* Checkmark on selected charity */
.dtec-checkout__charity-option::after {
	content: '';
	width: 24px;
	height: 24px;
	margin-left: auto;
	align-self: center;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--dtec-border);
	transition: background-color 250ms ease, border-color 250ms ease;
}

.dtec-checkout__charity-option:has(input:checked)::after {
	background: var(--dtec-cta);
	border-color: var(--dtec-cta);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 12 10 16 18 8'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.dtec-checkout__charity-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.dtec-checkout__charity-info strong {
	font-size: 16px;
	font-weight: 600;
	color: var(--dtec-text);
}

.dtec-checkout__charity-info span {
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	color: rgba(46, 40, 38, 0.75);
}

/* --- Payment card — off-white bg + Place Order button --- */

.dtec-checkout__payment {
	background: var(--dtec-off-white-100);
}

.dtec-checkout__payment-submit {
	display: block;
	width: 100%;
	height: 92px;
	margin-top: var(--space-l);
	font-family: var(--dtec-font-family);
	font-size: var(--text-xl);
	font-weight: var(--dtec-font-bold);
	color: var(--dtec-white);
	background: var(--dtec-cta);
	border: none;
	border-radius: var(--dtec-radius-sm);
	cursor: pointer;
	transition: background var(--dtec-duration-fast) var(--dtec-ease-default),
	            transform var(--dtec-duration-fast) var(--dtec-ease-default);
}

.dtec-checkout__payment-submit:hover:not(:disabled) {
	background: var(--dtec-cta-hover);
	transform: translateY(-1px);
}

.dtec-checkout__payment-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --- Payment header (title + card brand icons) --- */

.dtec-checkout__payment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-l);
	margin-bottom: var(--space-l);
	border-bottom: 1px solid var(--dtec-border);
}

.dtec-checkout__card-icons-img {
	height: 40px;
	width: auto;
	max-width: 300px;
}

.dtec-checkout__payment-trust {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-m);
	color: var(--dtec-text);
	font-size: var(--text-s);
	font-weight: var(--dtec-font-semibold);
}

.dtec-checkout__payment-trust-icon {
	display: inline-flex;
	width: 2em;
	height: 2em;
	color: var(--dtec-trust-green, #4C8F37);
	flex: 0 0 auto;
}

.dtec-checkout__payment-trust-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.dtec-checkout__payment-trust-icon svg path:first-child {
	fill: currentColor;
}

.dtec-checkout__payment-trust-icon svg path:last-child {
	fill: none;
	stroke: var(--dtec-white);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dtec-checkout__payment-trust strong {
	font-size: 1.15em;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	text-transform: lowercase;
}

/* --- Payment fields (3-col: card number | expiry | cvv) --- */

.dtec-checkout__payment-fields {
	display: grid;
	grid-template-columns: 1fr 140px 140px;
	gap: var(--space-m);
}

@media (max-width: 600px) {
	.dtec-checkout__payment-fields {
		grid-template-columns: 1fr;
	}
}

.dtec-checkout__stripe-field {
	padding: var(--space-s);
	border: 1px solid var(--dtec-border);
	border-radius: var(--dtec-radius-md);
	background: var(--dtec-bg);
	min-height: 50px;
	display: flex;
	align-items: center;
	transition: border-color var(--dtec-duration-fast) var(--dtec-ease-default),
	            box-shadow var(--dtec-duration-fast) var(--dtec-ease-default);
}

.dtec-checkout__stripe-field.StripeElement--focus {
	border-color: var(--dtec-primary);
	box-shadow: 0 0 0 3px var(--dtec-primary-ring);
}

.dtec-checkout__stripe-field.StripeElement--invalid {
	border-color: var(--dtec-error);
}

.dtec-checkout__stripe-field > div {
	width: 100%;
}

/* --- Error messages --- */

.dtec-checkout__error {
	display: none;
	margin-top: var(--space-m);
	padding: var(--space-s) var(--space-m);
	font-size: var(--text-s);
	color: var(--dtec-error);
	background: var(--dtec-error-light);
	border: 1px solid var(--dtec-error-border);
	border-radius: var(--dtec-radius-md);
}

.dtec-checkout__error--inline {
	margin-top: var(--space-s);
}

/* Sidebar styles in checkout-sidebar.css */