/* Kreativa Gigs — order timeline, shared by My Account and wp-admin. */
.kreativa-timeline {
	--kt-primary: var(--wp--preset--color--primary, #5b3df5);
	--kt-ink: var(--wp--preset--color--contrast, #16161d);
	--kt-muted: var(--wp--preset--color--muted, #6b6b76);
	--kt-border: var(--wp--preset--color--border, #e7e2da);
	--kt-surface: var(--wp--preset--color--surface, #fff);
	--kt-soft: var(--wp--preset--color--primary-soft, #efebff);
	--kt-success: #12b76a;
	--kt-warn: #f79009;
	--kt-late: #d92d20;
}

/* Progress steps */
.kreativa-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	counter-reset: none;
}
.kreativa-steps li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	font-size: 0.8rem;
	color: var(--kt-muted);
}
.kreativa-steps li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: calc(-50% + 18px);
	right: calc(50% + 18px);
	height: 3px;
	border-radius: 3px;
	background: var(--kt-border);
}
.kreativa-steps li:first-child::before { display: none; }
.kreativa-steps li.is-done::before,
.kreativa-steps li.is-current::before { background: var(--kt-primary); }
.kreativa-steps__dot {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--kt-border);
	background: var(--kt-surface);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--kt-muted);
	position: relative;
	z-index: 1;
}
.kreativa-steps li.is-done .kreativa-steps__dot { background: var(--kt-primary); border-color: var(--kt-primary); color: #fff; }
.kreativa-steps li.is-current .kreativa-steps__dot { border-color: var(--kt-primary); color: var(--kt-primary); box-shadow: 0 0 0 5px var(--kt-soft); }
.kreativa-steps li.is-current .kreativa-steps__label,
.kreativa-steps li.is-done .kreativa-steps__label { color: var(--kt-ink); font-weight: 600; }

/* Deadline */
.kreativa-due {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.9rem;
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.5rem;
	border-radius: 12px;
	background: var(--kt-soft);
	color: var(--kt-ink);
}
.kreativa-due__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kt-muted); }
.kreativa-due__countdown { margin-left: auto; font-weight: 700; color: var(--kt-primary); }
.kreativa-due.is-late { background: #fef3f2; }
.kreativa-due.is-late .kreativa-due__countdown { color: var(--kt-late); }

/* Events */
.kreativa-events { list-style: none; margin: 0; padding: 0; position: relative; }
.kreativa-events::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--kt-border);
}
.kreativa-event { position: relative; display: flex; gap: 1rem; padding: 0 0 1.25rem; }
.kreativa-event__icon {
	flex: none;
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--kt-surface);
	border: 2px solid var(--kt-border);
	font-size: 15px;
	line-height: 1;
}
.kreativa-event__icon::before { content: "•"; color: var(--kt-muted); }
.kreativa-event.is-placed .kreativa-event__icon::before { content: "🛒"; }
.kreativa-event.is-brief .kreativa-event__icon::before { content: "📝"; }
.kreativa-event.is-started .kreativa-event__icon::before { content: "🚀"; }
.kreativa-event.is-message .kreativa-event__icon::before { content: "💬"; }
.kreativa-event.is-delivered .kreativa-event__icon::before { content: "📦"; }
.kreativa-event.is-revision .kreativa-event__icon::before { content: "↺"; color: var(--kt-warn); font-weight: 700; }
.kreativa-event.is-completed .kreativa-event__icon::before { content: "✓"; color: #fff; font-weight: 700; }
.kreativa-event.is-completed .kreativa-event__icon { background: var(--kt-success); border-color: var(--kt-success); }
.kreativa-event.is-delivered .kreativa-event__icon { border-color: var(--kt-primary); }
.kreativa-event.is-cancelled .kreativa-event__icon::before,
.kreativa-event.is-refunded .kreativa-event__icon::before,
.kreativa-event.is-failed .kreativa-event__icon::before { content: "✕"; color: var(--kt-late); font-weight: 700; }

.kreativa-event__body {
	flex: 1;
	min-width: 0;
	padding: 0.15rem 0 0;
}
.kreativa-event__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.kreativa-event__head strong { color: var(--kt-ink); }
.kreativa-event__head time { font-size: 0.8rem; color: var(--kt-muted); }
.kreativa-event__text {
	margin-top: 0.5rem;
	padding: 0.8rem 1rem;
	border-radius: 12px;
	background: var(--kt-surface);
	border: 1px solid var(--kt-border);
	color: var(--kt-ink);
	font-size: 0.92rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}
.kreativa-event__text p { margin: 0 0 0.5em; }
.kreativa-event__text p:last-child { margin-bottom: 0; }
.kreativa-event.by-buyer .kreativa-event__text { background: var(--kt-soft); border-color: transparent; }
.kreativa-event.is-delivered .kreativa-event__text { border-color: var(--kt-primary); }
.kreativa-event__file {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	background: var(--kt-primary);
	color: var(--kt-surface) !important;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none !important;
}
.kreativa-event__file::before { content: "⬇"; }

@media (max-width: 600px) {
	.kreativa-steps__label { font-size: 0.68rem; }
	.kreativa-due__countdown { margin-left: 0; }
}

/* Attached files */
.kreativa-files { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.kreativa-files a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.75rem;
	border-radius: 10px;
	background: var(--kt-surface);
	border: 1px solid var(--kt-border);
	color: var(--kt-ink) !important;
	text-decoration: none !important;
	font-size: 0.88rem;
	transition: border-color 0.15s;
}
.kreativa-files a:hover { border-color: var(--kt-primary); }
.kreativa-files__ext {
	flex: none;
	min-width: 2.6rem;
	padding: 0.3rem 0.35rem;
	border-radius: 6px;
	background: var(--kt-primary);
	color: var(--kt-surface);
	font-size: 0.68rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.03em;
}
.kreativa-files__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kreativa-files__size { flex: none; color: var(--kt-muted); font-size: 0.8rem; }
.kreativa-files__name::after { content: " ⬇"; color: var(--kt-primary); }

/* File input */
.kreativa-file-field { display: grid; gap: 0.35rem; }
.kreativa-file-field > span { font-weight: 600; font-size: 0.9rem; }
.kreativa-file-field small { color: var(--wp--preset--color--muted, #6b6b76); font-size: 0.78rem; }
.kreativa-file-field input[type="file"] {
	padding: 0.65rem;
	border: 2px dashed var(--wp--preset--color--border, #d0d5dd);
	border-radius: 10px;
	background: var(--wp--preset--color--base, #fcfcfd);
	color: var(--wp--preset--color--contrast, #16161d);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}
.kreativa-file-field input[type="file"]:hover { border-color: var(--wp--preset--color--primary, #5b3df5); }

/* Dark mode */
html[data-theme="dark"] .kreativa-due.is-late { background: #3a1716; }
html[data-theme="dark"] .kreativa-due.is-late .kreativa-due__countdown { color: #fda29b; }