/*
 * Linkee — Checkout page
 * public/assets/css/checkout.css
 */

* { box-sizing: border-box; }

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--color-surface-alt);
	font-family: var(--font-ui);
	color: var(--color-ink);
}

.ckt-wrap {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding: var(--space-6) var(--space-4);
}

.ckt-card {
	width: 100%;
	max-width: var(--block-max);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	height: fit-content;
}

.ckt-store-paused {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin: auto;
	padding: var(--space-8) var(--space-6);
	border-color: var(--color-sage-border);
	background: var(--color-sage);
	color: var(--color-header-text);
	box-shadow: var(--shadow-card-soft);
	text-align: center;
}

.ckt-store-paused > i {
	font-size: var(--icon-xl);
	line-height: 1;
}

.ckt-store-paused h1 {
	margin: 0;
	color: var(--color-header-text);
	font-size: var(--text-xl);
	line-height: 1.3;
}

.ckt-store-paused a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	background: var(--color-yellow);
	color: var(--color-header-text);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-card-soft);
	transition: background var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.ckt-store-paused a:hover,
.ckt-store-paused a:focus-visible {
	background: var(--color-header-text);
	color: var(--color-yellow);
	transform: translateY(calc(-1 * var(--space-0-5)));
}

.ckt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border-dim);
}

.ckt-back {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	justify-content: center;
	width: calc(var(--space-4) + var(--space-4));
	height: calc(var(--space-4) + var(--space-4));
	padding: 0;
	border: 1px solid var(--color-border-dim);
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-mid);
	text-decoration: none;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ckt-back i {
	font-size: 1rem;
}

.ckt-back:hover,
.ckt-back:focus-visible {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-bg);
}

.ckt-seller {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}

.ckt-seller-avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--color-surface-alt);
}

.ckt-seller-avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-header-text);
	background: var(--color-yellow);
}

.ckt-seller-copy {
	min-width: 0;
}

.ckt-seller-name {
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.2;
}

.ckt-checkout-context {
	margin-top: var(--space-1);
	color: var(--color-mid);
	font-size: var(--text-xs);
}

.ckt-seller-bio {
	margin-top: var(--space-1);
	color: var(--color-mid);
	font-size: var(--text-sm);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ckt-product {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border-dim);
}

.ckt-thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-lg);
	object-fit: cover;
	flex-shrink: 0;
}

.ckt-title {
	font-size: var(--text-lg);
	font-weight: 700;
}

.ckt-price {
	font-family: var(--font-mono);
	font-size: var(--text-md);
	color: var(--color-mid);
	margin-top: var(--space-1);
}

.ckt-event-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--color-mid);
}

.ckt-event-meta i {
	margin-right: var(--space-1);
}

/* ── Collapsed order disclosure and group line items ── */
.ckt-order {
	margin-bottom: var(--space-6);
	border: var(--line-thin) solid var(--color-border-dim);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.ckt-order-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4);
	cursor: pointer;
	list-style: none;
}

.ckt-order-summary::-webkit-details-marker {
	display: none;
}

.ckt-order-summary:focus-visible {
	outline: var(--line-medium) solid var(--color-ink);
	outline-offset: var(--space-0-5);
}

.ckt-order-heading {
	display: grid;
	gap: var(--space-1);
}

.ckt-order-heading > strong {
	font-size: var(--text-md);
}

.ckt-order-heading > span {
	color: var(--color-mid);
	font-size: var(--text-sm);
}

.ckt-order-total {
	font-family: var(--font-mono);
	font-size: var(--text-md);
	white-space: nowrap;
}

.ckt-lines {
	display: grid;
	gap: var(--space-3);
	margin: 0 var(--space-4) var(--space-4);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
	border-top: var(--line-thin) solid var(--color-border-dim);
	border-bottom: var(--line-thin) solid var(--color-border-dim);
}

.ckt-line {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-2);
	border-radius: var(--radius-md);
}

.ckt-line--error {
	outline: var(--line-thin) solid var(--color-danger);
}

.ckt-line-info {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: var(--space-1);
}

.ckt-line-side {
	display: grid;
	justify-items: end;
	gap: var(--space-2);
	flex-shrink: 0;
}

.ckt-qty {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.ckt-qty-btn {
	width: 28px;
	height: 28px;
	border: var(--line-thin) solid var(--color-border-dim);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: var(--text-md);
	line-height: 1;
	cursor: pointer;
}

.ckt-qty-btn:disabled {
	opacity: .4;
	cursor: default;
}

.ckt-qty-input {
	width: 48px;
	text-align: center;
}

.ckt-line-total {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: var(--text-md);
}

.ckt-line-remove {
	background: none;
	border: none;
	color: var(--color-mid);
	cursor: pointer;
	padding: var(--space-1);
}

.ckt-line-remove:hover {
	color: var(--color-danger);
}

.ckt-line-error {
	font-size: var(--text-sm);
	color: var(--color-danger);
}

.ckt-lines-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	font-size: var(--text-lg);
	margin: 0 var(--space-4) var(--space-4);
}

.ckt-lines-total span:last-child {
	font-family: var(--font-mono);
}

.ckt-field {
	margin-bottom: var(--space-4);
}

.ckt-choice-field {
	margin-bottom: var(--space-4);
}

.ckt-receipt-section {
	margin-bottom: var(--space-5);
}

.ckt-receipt-section .ckt-choice-field {
	margin-bottom: 0;
}

.ckt-receipt-section [data-receipt-email-field] {
	margin-top: var(--space-3);
	margin-bottom: 0;
}

.ckt-contact-fields {
	display: grid;
	grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.ckt-contact-fields .ckt-field {
	min-width: 0;
	margin-bottom: 0;
}

.ckt-check-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-ink);
	font-size: var(--text-sm);
	line-height: 1.4;
	cursor: pointer;
}

.ckt-check-label input {
	margin: 0;
	accent-color: var(--color-ink);
}

.ckt-field label {
	display: block;
	font-size: var(--text-sm);
	line-height: 1.1;
	color: var(--color-mid);
	margin-bottom: var(--space-2);
}
.ckt-field-row {
	display: flex;
	gap: var(--space-3);
}

.ckt-field-col {
	flex: 1;
	min-width: 0;
}

.ckt-field-col--postal {
	flex: 0 0 110px;
}

.ckt-input--postal {
	letter-spacing: .04em;
	text-align: center;
}

@media (max-width: 480px) {
	.ckt-field-row {
		flex-wrap: wrap;
	}
	.ckt-field-col--city {
		flex: 1 1 100%;
	}
	.ckt-field-col--postal {
		flex: 1 1 100%;
	}
}
.ckt-input {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--text-input);
	outline: none;
}

.ckt-input:focus {
	border-color: var(--color-ink);
}

.ckt-input:disabled {
	background: var(--color-surface-alt);
	border-color: var(--color-border-dim);
	color: var(--color-ink-muted);
	-webkit-text-fill-color: var(--color-ink-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* Combobox styles moved to the shared address-picker.css */

/* Field-level error state — paired with .ckt-field-error below.
   Same 1.5px border width as default so layout doesn't shift. */
.ckt-input[aria-invalid="true"] {
	border-color: var(--color-danger);
}

.ckt-input[aria-invalid="true"]:focus {
	border-color: var(--color-danger);
	/* Keep danger color on focus instead of flipping to ink. */
}

.ckt-field-error {
	color: var(--color-danger);
	font-size: var(--text-xs);
	margin-top: var(--space-1);
	line-height: 1.4;
}

.ckt-textarea {
	resize: vertical;
	min-height: 72px;
}
.ckt-methods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
}

.ckt-method {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-1);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-xl);
	cursor: pointer;
	text-align: center;
	transition: border-color 150ms ease, background 150ms ease;
}

.ckt-method input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.ckt-method-icon {
	font-size: var(--icon-l);
	line-height: 1;
	color: var(--color-mid);
	transition: color 150ms ease;
}

.ckt-method-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
}

.ckt-method:has(input:checked) {
	border-color: var(--color-ink);
	background: var(--color-surface-alt);
}

.ckt-method:has(input:checked) .ckt-method-icon {
	color: var(--color-ink);
}

.ckt-method:has(:focus-visible) {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.ckt-methods { gap: var(--space-1); }
	.ckt-method { padding: var(--space-3) var(--space-1); }
	.ckt-method-icon { font-size: 22px; }
}
.ckt-card-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

/* Expiry field — slightly wider than CVV since it carries MM / YY. */
.ckt-card-exp {
	text-align: center;
	letter-spacing: .04em;
}

.ckt-error {
	background: color-mix(in srgb, var(--color-danger) 12%, transparent);
	color: var(--color-danger);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	margin-bottom: var(--space-4);
}

.ckt-remember {
	margin-bottom: var(--space-5);
}

.ckt-remember-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.ckt-info-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--space-4) + var(--space-2));
	height: calc(var(--space-4) + var(--space-2));
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-mid);
	cursor: pointer;
}

.ckt-info-button span {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
}

.ckt-info-button:hover,
.ckt-info-button:focus-visible,
.ckt-info-button[aria-expanded="true"] {
	background: var(--color-surface-alt);
	color: var(--color-ink);
}

.ckt-info-button:focus-visible {
	outline: var(--line-medium) solid var(--color-ink);
	outline-offset: var(--space-0-5);
}

.ckt-info-popover {
	position: absolute;
	z-index: 2;
	top: calc(100% + var(--space-2));
	right: 0;
	width: max-content;
	max-width: min(var(--block-max), calc(100vw - var(--space-8)));
	padding: var(--space-4);
	border: var(--line-thin) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-card-soft);
	font-size: var(--text-xs);
	line-height: 1.5;
}

.ckt-info-popover p {
	margin: 0 0 var(--space-3);
}

.ckt-info-popover a {
	color: var(--color-ink);
	font-weight: 700;
}

.ckt-remembered-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-2);
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--color-sage);
	color: var(--color-header-text);
	font-size: var(--text-xs);
}

.ckt-remembered-status button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-header-text);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.ckt-expiry {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-mid);
	margin: var(--space-2) 0;
}
.ckt-expiry-time { font-weight: 700; color: var(--color-ink); }
.ckt-pay {
	width: 100%;
	min-height: 52px;
	padding: var(--space-4);
	background: var(--color-yellow);
	color: var(--color-header-text);
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.ckt-pay:disabled {
	opacity: .6;
	cursor: default;
}

/* Pay + Add more items share one row at every width. */
.ckt-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.ckt-actions .ckt-pay {
	flex: 1;
	min-width: 0;
}

/* Outline/secondary action — same pill geometry as .ckt-return. */
.ckt-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--space-3) var(--space-5);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 150ms ease, background 150ms ease;
}

.ckt-secondary:hover,
.ckt-secondary:focus-visible {
	border-color: var(--color-ink);
	background: var(--color-surface-alt);
}

@media (max-width: 480px) {
	.ckt-actions { gap: var(--space-2); }
	.ckt-secondary { padding-inline: var(--space-3); }
}

/* Empty-bag state, revealed when the last line is removed. */
.ckt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.ckt-empty > i {
	font-size: var(--icon-xl);
	line-height: 1;
	color: var(--color-mid);
}

.ckt-empty p {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-mid);
}

/* Author display rules beat the UA [hidden] rule; restore hiding. */
.ckt-lines[hidden],
.ckt-lines-total[hidden],
.ckt-empty[hidden] {
	display: none;
}
.ckt-qris-logo {
	width: 160px;
	height: auto;
	aspect-ratio: 108.37 / 17.41; /* matches the SVG's viewBox ratio, keeps height auto-ish */
	margin: 0 auto var(--space-4);
	display: block;
	background-color: var(--color-dim);
	-webkit-mask: url(/assets/img/qris-logo.svg) center / contain no-repeat;
	mask: url(/assets/img/qris-logo.svg) center / contain no-repeat;
}

.ckt-pending .ckt-qr {
	margin: 0 auto;
}
.ckt-result {
	text-align: center;
}

.ckt-result-actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-5);
}

.ckt-return {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-ink);
	background: var(--color-surface);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

.ckt-return i {
	font-size: 1rem;
}

.ckt-section { margin-bottom: var(--space-6); }
.ckt-section:first-child {
	margin-bottom: var(--space-5);
}
.ckt-section-title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-mid);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border-dim);
}

/* Ship to carries its own card structure — no divider under the label. */
.ckt-delivery-section .ckt-section-title {
	margin-bottom: var(--space-3);
	padding-bottom: 0;
	border-bottom: 0;
}
.ckt-contact-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding: var(--space-2) 0;
}
.ckt-contact-summary-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-ink);
}
.ckt-contact-summary-line span:last-child {
	font-weight: 400;
	color: var(--color-mid);
}
.ckt-contact-edit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: var(--space-2) 0;
	border: 0;
	background: transparent;
	color: var(--color-mid);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ckt-contact-edit:hover,
.ckt-contact-edit:focus-visible {
	color: var(--color-ink);
}
.ckt-delivery-notes {
	margin-top: var(--space-3);
	border: 0;
	background: transparent;
}
.ckt-delivery-notes summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) 0;
	color: var(--color-mid);
	font-size: var(--text-sm);
	cursor: pointer;
	list-style: none;
}
.ckt-delivery-notes summary::-webkit-details-marker { display: none; }
.ckt-delivery-notes summary i { font-size: var(--icon-md); }
.ckt-delivery-notes summary:focus-visible {
	outline: var(--line-medium) solid var(--color-ink);
	outline-offset: calc(-1 * var(--space-0-5));
}
/* Open, the editor replaces the trigger entirely — the entered note already
   lives in the textarea, so the summary would only duplicate it. */
.ckt-delivery-notes[open] summary {
	display: none;
}
.ckt-delivery-notes-body {
	padding: var(--space-2) 0 0;
}
.ckt-delivery-notes-body .ckt-field { margin-bottom: 0; }
.ckt-delivery-notes-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	margin-top: var(--space-2);
}
.ckt-delivery-note-cancel {
	min-height: 32px;
	padding: var(--space-1) 0;
	border: 0;
	background: transparent;
	color: var(--color-mid);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ckt-delivery-note-cancel:hover,
.ckt-delivery-note-cancel:focus-visible {
	color: var(--color-ink);
}
.ckt-delivery-note-save {
	min-height: 32px;
	margin-top: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-mid);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	cursor: pointer;
}
.ckt-delivery-note-save:hover,
.ckt-delivery-note-save:focus-visible {
	border-color: var(--color-ink);
	color: var(--color-ink);
}
.ckt-optional { font-weight: 400; color: var(--color-dim); }
.ckt-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-mid);
	text-align: center;
}
.ckt-trust i { font-size: 13px; }

.ckt-pending .ckt-sub,
.ckt-success .ckt-sub {
	color: var(--color-mid);
	font-size: var(--text-sm);
	margin-top: var(--space-3);
}
.ckt-sub::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--color-orange, currentColor);
	animation: ckt-pulse 1.4s ease-in-out infinite;
	vertical-align: 1px;
}
@keyframes ckt-pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.ckt-spin {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	border: 2px solid rgba(0,0,0,.25);
	border-top-color: var(--color-header-text);
	border-radius: 50%;
	vertical-align: -2px;
	animation: ckt-spin .7s linear infinite;
}

@keyframes ckt-spin { to { transform: rotate(360deg); } }
.ckt-qr {
	width: 220px;
	height: 220px;
	margin: var(--space-4) auto;
	display: block;
}

.ckt-va {
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	font-weight: 700;
	margin: var(--space-3) 0;
}
.ckt-va-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-2) 0 var(--space-3);
}
.ckt-va-number {
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: .02em;
}
.ckt-va-copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--text-xs);
	font-weight: 600;
	cursor: pointer;
	color: var(--color-ink);
}
.ckt-va-copy:hover { background: var(--color-surface-alt); }
.ckt-va-copy i { font-size: 13px; }

.ckt-success i {
	font-size: 48px;
	color: var(--color-live);
}

.ckt-download {
	display: inline-block;
	margin-top: var(--space-5);
	padding: var(--space-3) var(--space-6);
	background: var(--color-yellow);
	color: var(--color-header-text);
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.ckt-download + .ckt-result-actions {
	margin-top: var(--space-4);
}

@media (max-width: 640px) {
	.ckt-card {
		padding: var(--space-5);
	}

	.ckt-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.ckt-back {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	.ckt-seller {
		align-items: flex-start;
	}

	.ckt-product {
		align-items: flex-start;
	}
}

/* ── Merchant QRIS: exact-amount breakdown + claim ─────────── */

.ckt-breakdown {
	margin: var(--space-3) auto 0;
	max-width: 320px;
	border: 1px solid var(--color-border-dim);
	border-radius: var(--radius-card, 12px);
	padding: var(--space-3) var(--space-4);
	text-align: left;
}

.ckt-breakdown-row {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	color: var(--color-mid);
	padding: var(--space-1) 0;
}

.ckt-breakdown-total {
	border-top: 1px solid var(--color-border-dim);
	margin-top: var(--space-1);
	padding-top: var(--space-2);
	font-weight: 700;
	color: var(--color-ink);
}

.ckt-claim {
	margin-top: var(--space-4);
}

.ckt-claimed {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
}

.ckt-claim-err {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-danger);
}

/* Shared POI search and action styles live in address-picker.css; checkout
   owns only the progressive delivery-address states around the block. */
.ckt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ckt-address-manual i {
	font-size: var(--icon-sm);
}

.ckt-address-manual,
.ckt-address-use-search,
.ckt-address-change {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-2) var(--space-1);
	border: 0;
	background: transparent;
	color: var(--color-mid);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ckt-address-manual {
	gap: var(--space-1-5);
	margin-top: 0;
}

.ckt-address-manual:hover,
.ckt-address-manual:focus-visible,
.ckt-address-use-search:hover,
.ckt-address-use-search:focus-visible,
.ckt-address-change:hover,
.ckt-address-change:focus-visible {
	color: var(--color-ink);
}

.ckt-address-manual-panel {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-dim);
}

.ckt-address-manual-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.ckt-address-manual-header strong {
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.ckt-address-card {
	margin-top: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-sub);
	box-shadow: var(--shadow-card-soft);
}

.ckt-address-recipient--default {
	margin: 0 0 var(--space-3);
}

.ckt-address-card.is-manual {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.ckt-address-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
}

.ckt-address-card-footer {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

.ckt-address-recipient {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Phone rides the name line inline — one identity line, envelope-style:
   quiet, tabular digits, no breadcrumb break. */
.ckt-address-recipient-phone {
	font-weight: 400;
	letter-spacing: 0;
	color: var(--color-mid);
	font-variant-numeric: tabular-nums;
}

/* Pencil edit rides the name line as a superscript mark, not a text link. */
.ckt-address-edit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-5);
	height: var(--space-5);
	margin-left: var(--space-1);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-mid);
	vertical-align: super;
	cursor: pointer;
}

.ckt-address-edit-icon i {
	font-size: var(--text-sm);
}

.ckt-address-edit-icon:hover,
.ckt-address-edit-icon:focus-visible {
	color: var(--color-ink);
}

/* "Use other address" takes the card header's top-right slot. */
.ckt-address-change--header {
	flex-shrink: 0;
	align-self: flex-start;
	margin-left: auto;
}

/* Remember row and saved strip live inside the label card. */
.ckt-address-card .ckt-remember {
	margin: var(--space-3) 0 0;
}

.ckt-address-card-lines {
	display: grid;
	gap: var(--space-0-5);
	margin-top: var(--space-3);
}

.ckt-address-card-street {
	margin: 0;
}

/* Shipping-label street line: the hero content of the card — flat, editable,
   no browser resize grip, auto-grown by JS so one line leaves no dead air. */
.ckt-address-card-street-input {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--text-base);
	line-height: 1.5;
	overflow: hidden;
	resize: none;
}

.ckt-address-card-street-input:focus {
	border: 0;
	box-shadow: 0 1px 0 var(--color-ink);
}

.ckt-address-card-region {
	display: grid;
	gap: var(--space-0-5);
}

/* Region lines are the label's locality block: same rhythm as the street,
   quieted by color alone, tabular so the postal code scans. */
.ckt-address-card-line {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-mid);
	font-variant-numeric: tabular-nums;
}

.ckt-address-card-line--sub {
	color: var(--color-ink-muted);
}

.ckt-address-card.is-manual .ckt-address-card-region {
	display: none;
}

/* Manual street is a plain field, not the label-card treatment: give the
   borderless label input back the standard field box inside Manual only. */
.ckt-address-card.is-manual .ckt-address-card-street-input {
	min-height: 0;
	padding: var(--space-3) var(--space-4);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.ckt-address-card.is-manual .ckt-address-card-street-input:focus {
	border-color: var(--color-ink);
	box-shadow: none;
}

.ckt-address-card.is-manual .ckt-address-card-lines {
	margin-top: var(--space-3);
}

/* Delivery-address state status is reserved for the short loading update. */
.ckt-address-status {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--color-mid);
}

/* Transient cue after a POI seeds the street — gone on first edit. */
.ckt-address-street-hint {
	margin: var(--space-1) 0 0;
	font-size: var(--text-xs);
	color: var(--color-mid);
}

/* The label card groups address content vs. actions with a hairline, and the
   note trigger keeps the same boxed affordance it has in the Default state. */
.ckt-address-card .ckt-delivery-notes {
	padding-top: var(--space-2);
	border-top: var(--line-thin) solid var(--color-border-dim);
}

.ckt-address-card .ckt-delivery-notes summary {
	justify-content: flex-start;
	text-align: left;
	min-height: 48px;
	padding: var(--space-2) var(--space-3);
	border: var(--line-thin) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	color: var(--color-ink);
}

/* Default state: the same notes surface reads as a single boxed trigger
   under the search actions, matching the label-card note affordance. */
.ckt-address-default .ckt-delivery-notes summary {
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	border: var(--line-thin) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-alt);
	color: var(--color-ink);
}

.ckt-address-default .ckt-delivery-notes[open] summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ckt-address-default .ckt-delivery-notes-body {
	padding: var(--space-3) 0 0;
}

.ckt-address-card .ckt-delivery-notes summary span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ckt-address-card .ckt-address-card-footer .ckt-address-change,
.ckt-address-card .ckt-address-card-footer .ckt-address-use-search {
	justify-content: flex-start;
}

.ckt-address-recipient--default {
	display: none !important;
}

@media (max-width: 480px) {
	.ckt-contact-fields {
		grid-template-columns: 1fr;
	}

	.ckt-address-card-footer {
		flex-wrap: wrap;
	}
	.ckt-address-change {
		justify-content: flex-start;
	}
}