/* CapOn Order Tracking — monochrome, mobile first. Scoped to .cot */
.cot {
	--cot-ink: #111;
	--cot-muted: #6b6b6b;
	--cot-line: #e6e6e6;
	--cot-soft: #f6f6f6;
	--cot-bg: #fff;
	--cot-red: #d0021b;
	--cot-green: #128a3e;
	--cot-amber: #9a6100;
	--cot-amber-bg: #fff6e5;
	--cot-r: 6px;
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
	color: var(--cot-ink);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.45;
	font-size: 15px;
}
.cot *, .cot *::before, .cot *::after { box-sizing: border-box; }
.cot [lang="bn"] { font-family: "Noto Sans Bengali", "Hind Siliguri", "Nunito Sans", sans-serif; }

.cot-card {
	background: var(--cot-bg);
	border: 1px solid var(--cot-line);
	border-radius: var(--cot-r);
	padding: 20px 16px;
}
@media (min-width: 600px) { .cot-card { padding: 28px; } }

.cot-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.cot-sub { margin: 0 0 18px; color: var(--cot-muted); }
.cot-bn { display: block; font-size: 13px; color: var(--cot-muted); margin-top: 2px; }
.cot-h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; color: var(--cot-muted); }
.cot-muted { color: var(--cot-muted); font-size: 13px; }

/* Form */
.cot-form { display: grid; gap: 14px; }
.cot-field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cot-field input {
	width: 100%;
	font: inherit;
	font-size: 16px; /* no iOS zoom */
	padding: 12px 14px;
	border: 1px solid #cfcfcf;
	border-radius: var(--cot-r);
	background: #fff;
	color: var(--cot-ink);
	transition: border-color .15s, box-shadow .15s;
}
.cot-field input:focus { outline: none; border-color: var(--cot-ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .12); }
.cot-hint { display: block; color: var(--cot-muted); font-size: 12px; margin-top: 6px; }
.cot-alert {
	border: 1px solid var(--cot-red);
	background: #fff5f6;
	color: #8a0012;
	border-radius: var(--cot-r);
	padding: 10px 12px;
	margin: 0 0 14px;
	font-size: 14px;
}

/* Buttons */
.cot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 18px;
	border-radius: var(--cot-r);
	border: 1px solid var(--cot-ink);
	font: inherit;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s, color .15s, opacity .15s;
	line-height: 1.2;
}
.cot-btn-primary { background: var(--cot-ink); color: #fff !important; }
.cot-btn-primary:hover, .cot-btn-primary:focus-visible { background: #000; color: #fff; }
.cot-btn-ghost { background: #fff; color: var(--cot-ink) !important; }
.cot-btn-ghost:hover { background: var(--cot-soft); }
.cot-btn-wa { background: #fff; color: var(--cot-ink) !important; }
.cot-btn-wa:hover { background: var(--cot-soft); }
.cot-btn-block { width: 100%; }
.cot-btn[disabled], .cot-btn.is-loading { opacity: .6; cursor: progress; }
.cot-btn:focus-visible, .cot-copy:focus-visible, .cot a:focus-visible { outline: 2px solid var(--cot-ink); outline-offset: 2px; }
.cot-ico { flex: none; }

/* Result header */
.cot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.cot-kicker { font-weight: 800; font-size: 18px; }
.cot-meta { color: var(--cot-muted); font-size: 13px; }
.cot-who { text-align: right; font-size: 13px; color: var(--cot-muted); display: flex; flex-direction: column; }
.cot-who-name { color: var(--cot-ink); font-weight: 700; }
.cot-who-phone { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.cot-status {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border-radius: var(--cot-r);
	background: var(--cot-soft);
	margin-bottom: 14px;
}
.cot-status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cot-ink); margin-top: 7px; flex: none; }
.cot-tone-ok .cot-status-dot { animation: cot-pulse 1.8s ease-out infinite; }
.cot-tone-done .cot-status-dot { background: var(--cot-green); }
.cot-tone-warn .cot-status-dot { background: #e0a100; }
.cot-tone-bad .cot-status-dot { background: var(--cot-red); }
.cot-tone-wait .cot-status-dot { background: #9a9a9a; }
.cot-headline { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.cot-headline-bn { margin: 3px 0 0; color: #333; font-size: 14px; }
@keyframes cot-pulse {
	0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .35); }
	100% { box-shadow: 0 0 0 10px rgba(17, 17, 17, 0); }
}
@media (prefers-reduced-motion: reduce) { .cot-tone-ok .cot-status-dot { animation: none; } }

.cot-note { border: 1px solid var(--cot-line); border-radius: var(--cot-r); padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.cot-note-info { background: #fafafa; }
.cot-note-warn { background: var(--cot-amber-bg); border-color: #f1d9a6; color: #5c3b00; }

/* Timeline */
.cot-steps { list-style: none; margin: 4px 0 16px; padding: 0; }
.cot-step { position: relative; display: flex; gap: 12px; padding: 0 0 16px; margin: 0; }
.cot-step:last-child { padding-bottom: 0; }
.cot-step::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 24px;
	bottom: 0;
	width: 2px;
	background: var(--cot-line);
}
.cot-step:last-child::before { display: none; }
.cot-step.is-done::before { background: var(--cot-ink); }
.cot-step.is-current::before { background: var(--cot-line); }
.cot-step-dot {
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	border: 2px solid #cfcfcf;
	background: #fff;
	display: grid;
	place-items: center;
	color: #fff;
	position: relative;
	z-index: 1;
}
.cot-step-dot .cot-ico { width: 14px; height: 14px; stroke-width: 3; }
.cot-step.is-done .cot-step-dot { background: var(--cot-ink); border-color: var(--cot-ink); }
.cot-step.is-current .cot-step-dot { box-shadow: 0 0 0 4px rgba(17, 17, 17, .12); }
.cot-state-normal.cot-tone-done .cot-step.is-current .cot-step-dot { background: var(--cot-green); border-color: var(--cot-green); box-shadow: 0 0 0 4px rgba(18, 138, 62, .15); }
.cot-step.is-stop .cot-step-dot { background: var(--cot-red); border-color: var(--cot-red); box-shadow: 0 0 0 4px rgba(208, 2, 27, .12); }
.cot-state-attention .cot-step.is-current .cot-step-dot { background: #e0a100; border-color: #e0a100; }
.cot-step-body { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.cot-step-label { font-weight: 700; font-size: 15px; }
.cot-step.is-todo .cot-step-label { color: #9a9a9a; font-weight: 600; }
.cot-step-bn { font-size: 12px; color: var(--cot-muted); }
.cot-step.is-todo .cot-step-bn { color: #b5b5b5; }
.cot-step-time { font-size: 12px; color: var(--cot-muted); font-variant-numeric: tabular-nums; }
.cot-step.is-skipped .cot-step-label, .cot-step.is-skipped .cot-step-bn { text-decoration: line-through; text-decoration-color: #ccc; }

/* Boxes */
.cot-box { border: 1px solid var(--cot-line); border-radius: var(--cot-r); padding: 14px; margin-bottom: 12px; }
.cot-label { font-size: 13px; color: var(--cot-muted); font-weight: 700; }
.cot-label .cot-bn { font-weight: 400; }
.cot-eta-value { font-weight: 800; font-size: 17px; margin-top: 2px; }
.cot-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cot-soft);
	color: var(--cot-ink);
	vertical-align: middle;
}
.cot-chip-ok { background: #eaf6ee; color: #0d6b30; margin-top: 8px; }
.cot-chip .cot-ico { width: 12px; height: 12px; stroke-width: 3; }
.cot-chip .woocommerce-Price-amount { font-weight: 800; }

.cot-pathao .cot-btn { margin-top: 12px; }
.cot-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cot-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 700;
	background: var(--cot-soft);
	padding: 4px 8px;
	border-radius: 4px;
	word-break: break-all;
	color: var(--cot-ink);
}
.cot-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--cot-line);
	background: #fff;
	border-radius: var(--cot-r);
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	color: var(--cot-ink);
	min-height: 34px;
}
.cot-copy:hover { border-color: var(--cot-ink); }
.cot-copy.is-copied { border-color: var(--cot-green); color: var(--cot-green); }

.cot-money-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cot-amount { font-weight: 800; font-size: 20px; white-space: nowrap; }

/* Items */
.cot-items { margin: 18px 0 6px; }
.cot-items ul, .cot-recent ul { list-style: none; margin: 0; padding: 0; }
.cot-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--cot-line); margin: 0; }
.cot-item:first-child { border-top: 0; }
.cot-thumb-wrap { width: 52px; height: 52px; flex: none; border-radius: var(--cot-r); overflow: hidden; background: var(--cot-soft); }
.cot-thumb-wrap img { width: 52px !important; height: 52px !important; object-fit: cover; display: block; margin: 0 !important; }
.cot-item-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.cot-item-qty { color: var(--cot-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Recent orders */
.cot-recent { margin-top: 22px; }
.cot-recent li { margin: 0; }
.cot-recent a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--cot-line);
	border-radius: var(--cot-r);
	margin-bottom: 8px;
	text-decoration: none;
	color: var(--cot-ink);
}
.cot-recent a:hover { border-color: var(--cot-ink); }
.cot-recent-no { font-weight: 800; }
.cot-recent-meta { flex: 1; color: var(--cot-muted); font-size: 13px; }
.cot-recent-go { font-size: 20px; line-height: 1; }

/* Help */
.cot-help { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cot-line); }
.cot-help-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.cot-help-label span { font-weight: 400; color: var(--cot-muted); }
.cot-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cot-help-actions .cot-btn { padding: 10px 8px; font-size: 14px; }
.cot-again { text-align: center; margin: 16px 0 0; font-size: 14px; }
.cot-again a { color: var(--cot-ink); font-weight: 700; }

/* Inline box (thank-you page, My Account) */
.cot-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--cot-line);
	border-radius: var(--cot-r);
	padding: 14px 16px;
	margin: 0 0 24px;
	max-width: none;
}
.cot-inline-text { display: flex; flex-direction: column; }
.cot-inline-text span { font-size: 13px; color: var(--cot-muted); }

.cot .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}