:root {
	--timepark-availability-navy: #16263d;
	--timepark-availability-deep-navy: #0f1a2b;
	--timepark-availability-gold: #b8924a;
	--timepark-availability-ink: #111827;
	--timepark-availability-soft: #f7f5ef;
	--timepark-availability-line: rgba(22, 38, 61, 0.16);
}

.timepark-fulfillment-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-height: 26px;
	margin: 8px 0 6px;
	padding: 4px 9px;
	border: 1px solid var(--timepark-availability-line);
	border-radius: 999px;
	background: #fff;
	color: var(--timepark-availability-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: normal;
}

.timepark-fulfillment-badge--online {
	border-color: var(--timepark-availability-gold);
	background: var(--timepark-availability-gold);
	color: var(--timepark-availability-deep-navy);
}

.timepark-fulfillment-badge--preorder {
	border-color: var(--timepark-availability-gold);
	background: #fff8e8;
	color: var(--timepark-availability-deep-navy);
}

.timepark-fulfillment-badge--instore {
	border-color: var(--timepark-availability-deep-navy);
	background: var(--timepark-availability-deep-navy);
	color: #fff;
}

.timepark-fulfillment-panel {
	display: grid;
	gap: 5px;
	max-width: 100%;
	margin: 16px 0 18px;
	padding: 15px 17px;
	border: 1px solid var(--timepark-availability-line);
	border-left: 4px solid var(--timepark-availability-gold);
	border-radius: 7px;
	background: linear-gradient(135deg, #fff 0%, var(--timepark-availability-soft) 100%);
	box-shadow: 0 10px 26px rgba(15, 26, 43, 0.06);
	color: var(--timepark-availability-ink);
}

.timepark-fulfillment-panel__title {
	color: var(--timepark-availability-navy);
	font-size: 15px;
	line-height: 1.35;
}

.timepark-fulfillment-panel__message,
.timepark-fulfillment-panel__note {
	font-size: 13px;
	line-height: 1.55;
}

.timepark-fulfillment-panel__note {
	margin-top: 3px;
	padding-top: 7px;
	border-top: 1px solid var(--timepark-availability-line);
	font-weight: 600;
}

.timepark-fulfillment-panel--ready {
	border-left-color: var(--timepark-availability-navy);
}

.timepark-fulfillment-panel--preorder {
	border-left-color: var(--timepark-availability-gold);
	background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
}

.timepark-fulfillment-panel--instore {
	border-left-color: var(--timepark-availability-deep-navy);
	background: #f4f5f7;
}

@media (max-width: 767px) {
	.timepark-fulfillment-badge {
		min-height: 24px;
		padding: 4px 8px;
		font-size: 9px;
		letter-spacing: 0.015em;
	}

	.timepark-fulfillment-panel {
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.timepark-fulfillment-panel {
		scroll-behavior: auto;
	}
}