/* Kin COD Checkout — colors come from :root variables set in plugin settings */
.kcc, .kcc * { box-sizing: border-box; }
.kcc { margin: 18px 0; font-size: 16px; line-height: 1.4; color: inherit; }
.kcc-form { border: 2px solid var(--kcc-primary); border-radius: 12px; padding: 18px; background: #fff; max-width: 640px; }

.kcc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kcc-title { margin: 20px 0 12px; font-size: 1.05em; font-weight: 700; }

.kcc-field { margin-bottom: 12px; }
.kcc-field > label { display: block; margin-bottom: 4px; font-size: .9em; font-weight: 600; }
.kcc-field input[type="text"],
.kcc-field input[type="tel"],
.kcc-field select {
	width: 100%; height: 48px; padding: 0 12px; font-size: 16px; color: #111827;
	background: #fff; border: 1.5px solid #cbd5e1; border-radius: 8px; box-shadow: none; margin: 0;
}
.kcc-field input:focus, .kcc-field select:focus { outline: none; border-color: var(--kcc-primary); box-shadow: 0 0 0 3px var(--kcc-primary-soft); }
.kcc-field.is-invalid input, .kcc-field.is-invalid select { border-color: #b91c1c; }

.kcc-phone { display: flex; align-items: stretch; }
.kcc-prefix { display: flex; align-items: center; padding: 0 12px; font-weight: 600; background: #f1f5f9; border: 1.5px solid #cbd5e1; border-right: 0; border-radius: 8px 0 0 8px; }
.kcc-phone input { border-radius: 0 8px 8px 0 !important; }

.kcc-check label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .92em; }
.kcc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--kcc-primary); }
.kcc-other[hidden] { display: none; }

/* Offers: stacked rows, one per quantity */
.kcc-offers { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.kcc-offers legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 1.05em; }

.kcc-offer {
	position: relative; display: flex; align-items: center; gap: 12px;
	margin: 0 0 10px; padding: 14px 12px; cursor: pointer;
	background: #fff; border: 2px solid #d5dbe3; border-radius: 10px;
	transition: border-color .15s, background-color .15s;
}
.kcc-offer input { position: absolute; opacity: 0; pointer-events: none; }
.kcc-offer::before {
	content: ""; flex: 0 0 22px; height: 22px; border: 2px solid #94a3b8; border-radius: 50%; background: #fff;
}
.kcc-offer.is-selected { border-color: var(--kcc-primary); background: var(--kcc-primary-soft); }
.kcc-offer.is-selected::before { border-color: var(--kcc-primary); background: radial-gradient(circle, var(--kcc-primary) 0 45%, #fff 50%); }
.kcc-offer:focus-within { box-shadow: 0 0 0 3px var(--kcc-primary-soft); }

.kcc-offer-main { flex: 1 1 auto; min-width: 0; }
.kcc-offer-label { display: block; font-weight: 700; font-size: 1.05em; }
.kcc-offer-save { display: block; margin-top: 2px; font-size: .85em; font-weight: 600; color: var(--kcc-primary); }
.kcc-offer-save:empty { display: none; }

.kcc-offer-price { flex: 0 0 auto; text-align: right; }
.kcc-total { display: block; font-weight: 800; font-size: 1.15em; }
.kcc-old { display: block; font-size: .85em; color: #64748b; text-decoration: line-through; }
.kcc-old:empty { display: none; }

.kcc-badge {
	position: absolute; top: -10px; right: 12px; padding: 2px 10px;
	font-size: .75em; font-weight: 700; border-radius: 999px;
	background: var(--kcc-accent); color: var(--kcc-on-accent);
}

/* Summary */
.kcc-summary { margin: 14px 0; padding: 12px; background: #f8fafc; border-radius: 8px; }
.kcc-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.kcc-summary .kcc-s-total { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #cbd5e1; font-size: 1.05em; }
.kcc-summary .kcc-s-total strong { color: var(--kcc-primary); font-size: 1.15em; }

.kcc-error { margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: .92em; }
.kcc-error[hidden] { display: none; }

.kcc-submit, .kcc-sticky-btn {
	display: block; width: 100%; min-height: 52px; padding: 12px 16px;
	font-size: 17px; font-weight: 700; text-align: center; cursor: pointer;
	color: var(--kcc-on-primary); background: var(--kcc-primary);
	border: 0; border-radius: 10px; box-shadow: none;
}
.kcc-submit:hover, .kcc-sticky-btn:hover { filter: brightness(.94); color: var(--kcc-on-primary); background: var(--kcc-primary); }
.kcc-submit:focus-visible, .kcc-sticky-btn:focus-visible { outline: 3px solid var(--kcc-accent); outline-offset: 2px; }
.kcc-submit[disabled] { opacity: .7; cursor: wait; }

.kcc-trust { list-style: none; margin: 12px 0 0; padding: 0; font-size: .88em; color: #475569; }
.kcc-trust li { margin: 4px 0; padding-left: 20px; position: relative; }
.kcc-trust li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--kcc-primary); }

/* Sticky bar (mobile only) */
.kcc-sticky { display: none; }
@media (max-width: 768px) {
	.kcc-sticky:not([hidden]) {
		display: flex; align-items: center; gap: 12px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 14px rgba(0,0,0,.08);
	}
	.kcc-sticky-price { display: flex; flex-direction: column; font-size: .8em; line-height: 1.2; }
	.kcc-sticky-price strong { font-size: 1.25em; }
	.kcc-sticky-btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
	.kcc-form { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.kcc-offer { transition: none; }
}

/* Order bump + alt currency */
.kcc-bump{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px;border:2px dashed var(--kcc-accent);border-radius:10px;background:var(--kcc-primary-soft);cursor:pointer}
.kcc-bump input{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--kcc-primary)}
.kcc-bump-img{flex:0 0 56px}
.kcc-bump-img img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.kcc-bump-body{display:flex;flex-direction:column;gap:2px;font-size:.92em;min-width:0}
.kcc-bump-body strong{color:var(--kcc-primary)}
.kcc-bump-price del{color:#64748b;margin-inline-end:6px}
.kcc-bump-price b{font-size:1.1em}
.kcc-bump:has(input:checked){border-style:solid;border-color:var(--kcc-primary)}
.kcc-summary .kcc-s-alt{font-size:.85em;color:#475569}
.kcc-summary [hidden]{display:none}