/* Half Skull - Delhivery PIN checker + order tracking (Material 3 Expressive). */

/* ---------- Product page PIN result ---------- */
#shiprocket_pincode_result.hs-pin-result {
	display: grid;
	gap: 8px;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--m3-ink, #131316);
}
#shiprocket_pincode_result.is-loading { color: #6b6b73; }
#shiprocket_pincode_result.is-error { color: var(--m3-primary, #e3001c); font-weight: 600; }
.hs-pin-line { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.hs-pin-line a { color: inherit; text-decoration: underline; }
.hs-pin-line em { font-style: normal; font-size: 12px; color: #6b6b73; }
.hs-pin-ico {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: var(--m3-r-full, 999px);
	background: #1f8a4c;
	color: #fff;
	font: 700 13px/20px system-ui, sans-serif;
	text-align: center;
}
.hs-pin-ico::after { content: "\2713"; }
.hs-pin-line--warn .hs-pin-ico { background: #b26a00; }
.hs-pin-line--warn .hs-pin-ico::after { content: "!"; }
.hs-pin-line--bad .hs-pin-ico { background: var(--m3-primary, #e3001c); }
.hs-pin-line--bad .hs-pin-ico::after { content: "\00d7"; }
.hs-pin-line--date .hs-pin-ico { background: var(--m3-ink, #131316); }
.hs-pin-line--date .hs-pin-ico::after { content: "\203a"; font-size: 16px; }

/* ---------- Tracking ---------- */
.hs-trk {
	--trk-ink: var(--m3-ink, #131316);
	--trk-red: var(--m3-primary, #e3001c);
	--trk-red-c: var(--m3-primary-container, #ffe1e4);
	--trk-surface: var(--m3-surface-low, #f6f4f1);
	--trk-line: var(--m3-outline-variant, #e3e0dc);
	--trk-xl: var(--m3-r-xl, 28px);
	--trk-full: var(--m3-r-full, 999px);
	--trk-spring: cubic-bezier(.34, 1.56, .64, 1);
	--trk-display: var(--hs-font-display, Poppins), system-ui, sans-serif;
	max-width: 760px;
	margin: 0 auto 40px;
	color: var(--trk-ink);
	font-size: 15px;
	line-height: 1.5;
}
.hs-trk *, .hs-trk *::before, .hs-trk *::after { box-sizing: border-box; }
.hs-trk [hidden] { display: none !important; }
.hs-trk--inline { max-width: none; margin: 0 0 28px; }

.hs-trk-card {
	margin: 0 0 16px;
	padding: 20px;
	border-radius: var(--trk-xl);
	background: var(--trk-surface);
}
@media (min-width: 640px) { .hs-trk-card { padding: 28px; } }

.hs-trk-title {
	margin: 0 0 6px;
	font-family: var(--trk-display);
	font-size: clamp(22px, 5vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--trk-ink);
}
.hs-trk-sub { margin: 0 0 18px; color: #5f5f66; }
.hs-trk-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b6b73; }
.hs-trk-h { margin: 20px 0 12px; font-family: var(--trk-display); font-size: 18px; font-weight: 800; }

/* Mode switch */
.hs-trk-tabs {
	display: inline-flex;
	gap: 4px;
	margin: 0 0 16px;
	padding: 4px;
	border: 1.5px solid var(--trk-line);
	border-radius: var(--trk-full);
	background: #fff;
}
.hs-trk-tab {
	appearance: none;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--trk-full);
	background: transparent;
	color: var(--trk-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.hs-trk-tab[aria-selected="true"] { background: var(--trk-ink); color: #fff; }

/* Form */
.hs-trk-fields { display: grid; gap: 12px; }
@media (min-width: 700px) {
	.hs-trk-fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
	.hs-trk-fields--awb { grid-template-columns: 1fr auto; }
}
.hs-trk-field label { display: block; margin: 0 0 6px 18px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5f5f66; }
.hs-trk .hs-trk-input {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 20px;
	border: 1.5px solid var(--trk-line);
	border-radius: var(--trk-full);
	background: #fff;
	color: var(--trk-ink);
	font-size: 16px;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hs-trk .hs-trk-input:focus { outline: none; border-color: var(--trk-ink); box-shadow: 0 0 0 4px var(--trk-red-c); }
.hs-trk .hs-trk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: var(--trk-full);
	background: var(--trk-red);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .4s var(--trk-spring), border-radius .4s var(--trk-spring), background-color .2s ease;
}
.hs-trk .hs-trk-btn:hover { color: #fff; border-radius: 18px; transform: translateY(-2px); }
.hs-trk .hs-trk-btn:active { transform: scale(.97); }
.hs-trk .hs-trk-btn--ghost { background: #fff; color: var(--trk-ink); border: 1.5px solid var(--trk-line); }
.hs-trk .hs-trk-btn--ghost:hover { color: var(--trk-ink); }
.hs-trk-note { margin: 12px 0 0 4px; font-size: 13px; color: #6b6b73; }

.hs-trk-alert { margin: 0 0 16px; padding: 14px 18px; border-radius: 20px; background: var(--trk-red-c); color: #7a0010; font-weight: 600; }
.hs-trk-alert--info { background: #fff; border: 1.5px solid var(--trk-line); color: var(--trk-ink); font-weight: 500; }

/* Result */
.hs-trk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.hs-trk-head .hs-trk-title { font-size: clamp(20px, 4.5vw, 26px); }
.hs-trk-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1.5px solid var(--trk-line);
	border-radius: var(--trk-full);
	background: #fff;
	color: var(--trk-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.hs-trk-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hs-trk-chip.is-primary { border-color: transparent; background: var(--trk-red-c); color: #9b0014; }
.hs-trk-chip.is-success { border-color: transparent; background: #d9f5e3; color: #0b6b35; }
.hs-trk-chip.is-danger { border-color: transparent; background: #ffe1e4; color: #9b0014; }

.hs-trk-eta { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 22px; background: #fff; }
.hs-trk-eta-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 16px; background: var(--trk-red); position: relative; }
.hs-trk-eta-ico::before { content: ""; position: absolute; inset: 12px 11px 13px; border: 2.5px solid #fff; border-radius: 4px; }
.hs-trk-eta-ico::after { content: ""; position: absolute; left: 11px; right: 11px; top: 18px; height: 2.5px; background: #fff; }
.hs-trk-eta p { margin: 0; font-size: 13px; color: #6b6b73; }
.hs-trk-eta strong { display: block; font-family: var(--trk-display); font-size: 18px; line-height: 1.2; color: var(--trk-ink); }

.hs-trk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 20px; padding: 0; list-style: none; }
.hs-trk-step { position: relative; margin: 0; padding-top: 24px; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: #8a8a92; }
.hs-trk-step::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	width: 16px;
	height: 16px;
	border: 2px solid var(--trk-line);
	border-radius: 50%;
	background: #fff;
	transform: translateX(-50%);
	transition: transform .5s var(--trk-spring);
}
.hs-trk-step::after { content: ""; position: absolute; top: 7px; left: calc(50% + 8px); width: calc(100% - 12px); height: 2px; background: var(--trk-line); }
.hs-trk-step:last-child::after { display: none; }
.hs-trk-step.is-done { color: var(--trk-ink); }
.hs-trk-step.is-done::before { border-color: var(--trk-red); background: var(--trk-red); }
.hs-trk-step.is-done::after { background: var(--trk-red); }
.hs-trk-step.is-current::before { transform: translateX(-50%) scale(1.25); box-shadow: 0 0 0 5px var(--trk-red-c); }
.hs-trk-step.is-current::after { background: var(--trk-line); }

.hs-trk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.hs-trk-meta > div { min-width: 0; padding: 12px 14px; border-radius: 18px; background: #fff; }
.hs-trk-meta dt { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b73; }
.hs-trk-meta dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.hs-trk-meta a { color: var(--trk-ink); }
.hs-trk-meta .is-wide { grid-column: 1 / -1; }

.hs-trk-items { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.hs-trk-items li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 18px; background: #fff; }
.hs-trk-items img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.hs-trk-items span { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.hs-trk-items em { font-style: normal; color: #6b6b73; font-weight: 500; white-space: nowrap; }

.hs-trk-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.hs-trk-timeline li { position: relative; margin: 0; padding: 0 0 18px 32px; }
.hs-trk-timeline li::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--trk-red);
	box-shadow: 0 0 0 4px var(--trk-surface);
}
.hs-trk-timeline li::after { content: ""; position: absolute; top: 12px; bottom: -5px; left: 9px; width: 2px; background: var(--trk-line); }
.hs-trk-timeline li:last-child { padding-bottom: 0; }
.hs-trk-timeline li:last-child::after { display: none; }
.hs-trk-timeline li:first-child::before { top: 3px; left: 2px; width: 16px; height: 16px; box-shadow: 0 0 0 5px var(--trk-red-c); animation: hs-trk-pop .6s var(--trk-spring) both; }
.hs-trk-scan { margin: 0; font-weight: 700; }
.hs-trk-scan-meta, .hs-trk-scan-note { margin: 2px 0 0; font-size: 13px; color: #6b6b73; }
.hs-trk-empty { margin: 0; color: #5f5f66; }

.hs-trk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.hs-trk-help { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-trk .hs-trk-link {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border: 1.5px solid var(--trk-line);
	border-radius: var(--trk-full);
	background: #fff;
	color: var(--trk-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-radius .4s var(--trk-spring), border-color .2s ease;
}
.hs-trk .hs-trk-link:hover { border-color: var(--trk-ink); border-radius: 14px; color: var(--trk-ink); }

@keyframes hs-trk-pop { from { transform: scale(.4); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.hs-trk *, .hs-trk *::before, .hs-trk *::after { transition: none !important; animation: none !important; }
}