/* Kreativa Gigs — uses theme presets when available, with neutral fallbacks. */
:where(.kreativa-packages, .kreativa-compare, .kreativa-seller, .kreativa-drawer) {
	--kg-primary: var(--wp--preset--color--primary, #5b3df5);
	--kg-ink: var(--wp--preset--color--contrast, #16161d);
	--kg-muted: var(--wp--preset--color--muted, #6b6b76);
	--kg-border: var(--wp--preset--color--border, #e7e2da);
	--kg-surface: var(--wp--preset--color--surface, #fff);
	--kg-soft: var(--wp--preset--color--primary-soft, #efebff);
	--kg-radius: 16px;
}

/* ---------- Packages ---------- */
.kreativa-packages {
	background: var(--kg-surface);
	border: 1px solid var(--kg-border);
	border-radius: var(--kg-radius);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgb(22 22 29 / 0.25);
}

.kreativa-packages__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kreativa-packages__tabs {
	display: flex;
	border-bottom: 1px solid var(--kg-border);
}

.kreativa-packages__tab {
	flex: 1;
	padding: 0.95rem 0.5rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--kg-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
}

.kreativa-packages__tab:hover { color: var(--kg-ink); }

.kreativa-packages__radio.is-basic:checked ~ .kreativa-packages__tabs .is-basic,
.kreativa-packages__radio.is-standard:checked ~ .kreativa-packages__tabs .is-standard,
.kreativa-packages__radio.is-premium:checked ~ .kreativa-packages__tabs .is-premium {
	color: var(--kg-primary);
	border-bottom-color: var(--kg-primary);
}

.kreativa-packages__radio:focus-visible ~ .kreativa-packages__tabs .kreativa-packages__tab {
	outline-offset: -4px;
}
.kreativa-packages__radio.is-basic:focus-visible ~ .kreativa-packages__tabs .is-basic,
.kreativa-packages__radio.is-standard:focus-visible ~ .kreativa-packages__tabs .is-standard,
.kreativa-packages__radio.is-premium:focus-visible ~ .kreativa-packages__tabs .is-premium {
	outline: 2px solid var(--kg-primary);
}

.kreativa-packages__panel { display: none; padding: 1.5rem 1.5rem 0; }

.kreativa-packages__radio.is-basic:checked ~ .kreativa-packages__panels .is-basic,
.kreativa-packages__radio.is-standard:checked ~ .kreativa-packages__panels .is-standard,
.kreativa-packages__radio.is-premium:checked ~ .kreativa-packages__panels .is-premium {
	display: block;
}

.kreativa-packages__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.kreativa-packages__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kreativa-packages__price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--kg-ink);
	white-space: nowrap;
}

.kreativa-packages__desc { color: var(--kg-muted); margin: 0.75rem 0 1rem; line-height: 1.55; }

.kreativa-packages__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.kreativa-packages__meta li::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--kg-icon) center / contain no-repeat;
	mask: var(--kg-icon) center / contain no-repeat;
}

.kreativa-packages__meta .is-days { --kg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.kreativa-packages__meta .is-revisions { --kg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }

.kreativa-packages__features { list-style: none; padding: 0; margin: 0 0 1.25rem; }

.kreativa-packages__features li {
	position: relative;
	padding-left: 1.6rem;
	margin: 0.45rem 0;
	color: var(--kg-muted);
	font-size: 0.95rem;
}

.kreativa-packages__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--kg-primary);
	font-weight: 700;
}

.kreativa-packages__extras {
	margin: 0 1.5rem 1rem;
	padding: 1rem 0 0;
	border: 0;
	border-top: 1px solid var(--kg-border);
}

.kreativa-packages__extras legend,
.kreativa-packages__brief > label {
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0;
	margin-bottom: 0.5rem;
	display: block;
}

.kreativa-packages__extra {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	margin-bottom: 0.4rem;
	border: 1px solid var(--kg-border);
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.92rem;
}

.kreativa-packages__extra:has(input:checked) { border-color: var(--kg-primary); background: var(--kg-soft); }
.kreativa-packages__extra input { accent-color: var(--kg-primary); }
.kreativa-packages__extra-label { flex: 1; }
.kreativa-packages__extra-price { font-weight: 600; white-space: nowrap; }

.kreativa-packages__brief { margin: 0 1.5rem 1rem; }
.kreativa-packages__brief .required { color: #d92d20; text-decoration: none; }
.kreativa-packages__hint { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--kg-muted); }

.kreativa-packages__brief textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem;
	border: 1px solid var(--kg-border);
	border-radius: 10px;
	font: inherit;
	font-size: 0.95rem;
	resize: vertical;
	background: var(--wp--preset--color--base, #fff);
	color: var(--kg-ink);
}

.kreativa-packages__brief textarea:focus { outline: 2px solid var(--kg-primary); border-color: transparent; }

.kreativa-packages .kreativa-packages__submit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 3rem);
	margin: 0 1.5rem;
	padding: 0.95rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--kg-primary);
	color: var(--kg-surface);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.kreativa-packages .kreativa-packages__submit:hover { filter: brightness(1.08); }

.kreativa-packages__summary {
	margin: 0.75rem 1.5rem 0;
	text-align: center;
	color: var(--kg-muted);
	font-size: 0.85rem;
}

.kreativa-packages__compare {
	display: block;
	text-align: center;
	padding: 0.9rem;
	margin-top: 1rem;
	border-top: 1px solid var(--kg-border);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--kg-primary);
	text-decoration: none;
}

/* ---------- Compare ---------- */
.kreativa-compare { scroll-margin-top: 2rem; }
.kreativa-compare__heading,
.kreativa-seller__heading { font-size: 1.4rem; margin: 0 0 1rem; }
.kreativa-compare__scroll { overflow-x: auto; border: 1px solid var(--kg-border); border-radius: var(--kg-radius); background: var(--kg-surface); }

.kreativa-compare__table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.93rem; }
.kreativa-compare__table th,
.kreativa-compare__table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--kg-border); text-align: center; vertical-align: top; }
.kreativa-compare__table tr:last-child > * { border-bottom: 0; }
.kreativa-compare__table tbody th { text-align: left; font-weight: 500; color: var(--kg-muted); }
.kreativa-compare__table thead th { vertical-align: bottom; background: var(--kg-soft); }
.kreativa-compare__table thead th:first-child { text-align: left; }
.kreativa-compare__price { display: block; font-size: 1.2rem; font-weight: 700; color: var(--kg-ink); }
.kreativa-compare__tier { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kg-primary); margin-top: 0.2rem; }
.kreativa-compare__name { display: block; font-weight: 600; }
.kreativa-compare__table .is-yes { color: var(--kg-primary); font-weight: 700; }
.kreativa-compare__table .is-no { color: var(--kg-border); }

/* ---------- Designer ---------- */
.kreativa-seller__card { border: 1px solid var(--kg-border); border-radius: var(--kg-radius); padding: 1.5rem; background: var(--kg-surface); }
.kreativa-seller__top { display: flex; gap: 1rem; align-items: center; }
.kreativa-seller__avatar { border-radius: 50%; }
.kreativa-seller__name { margin: 0; font-weight: 700; font-size: 1.1rem; }
.kreativa-seller__role { margin: 0.15rem 0 0; color: var(--kg-muted); }
.kreativa-seller__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--kg-border); }
.kreativa-seller__stats dt { font-size: 0.8rem; color: var(--kg-muted); }
.kreativa-seller__stats dd { margin: 0.2rem 0 0; font-weight: 700; }
.kreativa-seller__bio { margin: 1.25rem 0 0; color: var(--kg-muted); line-height: 1.6; }

.kreativa-price-from { font-size: 0.75em; font-weight: 500; color: var(--wp--preset--color--muted, #6b6b76); margin-right: 0.15em; }


@media (max-width: 480px) {
	.kreativa-seller__stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Requirements drawer ---------- */
html.kreativa-drawer-open { overflow: hidden; }

.kreativa-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
}
.kreativa-drawer[hidden] { display: none; }
.kreativa-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgb(22 22 29 / 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.kreativa-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(520px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--kg-surface);
	color: var(--kg-ink);
	box-shadow: -24px 0 48px -24px rgb(22 22 29 / 0.35);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}
.kreativa-drawer.is-open .kreativa-drawer__overlay { opacity: 1; }
.kreativa-drawer.is-open .kreativa-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.kreativa-drawer__overlay,
	.kreativa-drawer__panel { transition: none; }
}

.kreativa-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--kg-border);
}
.kreativa-drawer__step {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kg-primary);
}
.kreativa-drawer__title { margin: 0.25rem 0 0; font-size: 1.35rem; }
.kreativa-drawer__package { margin: 0.25rem 0 0; color: var(--kg-muted); font-size: 0.9rem; }
.kreativa-drawer__close {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--kg-border);
	border-radius: 50%;
	background: var(--kg-surface);
	color: var(--kg-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.kreativa-drawer__close:hover { border-color: var(--kg-ink); }

.kreativa-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem 1.5rem 2rem;
	display: grid;
	align-content: start;
	gap: 1.4rem;
}

.kreativa-drawer__foot {
	padding: 1rem 1.5rem 1.25rem;
	border-top: 1px solid var(--kg-border);
	background: var(--kg-surface);
	display: grid;
	gap: 0.75rem;
}
.kreativa-drawer__totals { display: flex; align-items: baseline; gap: 0.75rem; }
.kreativa-drawer__totals > span:first-child { font-weight: 600; }
.kreativa-drawer__totals strong { font-size: 1.5rem; }
.kreativa-drawer__totals .kreativa-packages__days { margin-left: auto; color: var(--kg-muted); font-size: 0.9rem; }
.kreativa-drawer .kreativa-drawer__submit {
	width: 100%;
	padding: 0.95rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--kg-primary);
	color: var(--kg-surface);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.kreativa-drawer .kreativa-drawer__submit:hover { filter: brightness(1.08); }
.kreativa-drawer__secure { margin: 0; text-align: center; font-size: 0.8rem; color: var(--kg-muted); }

/* Questions */
.kreativa-req[hidden] { display: none; }
.kreativa-req fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kreativa-req__label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; padding: 0; }
.kreativa-req .required { color: #d92d20; text-decoration: none; }
.kreativa-req__help { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--kg-muted); }
.kreativa-req input[type="text"],
.kreativa-req textarea,
.kreativa-req select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--kg-border);
	border-radius: 10px;
	font: inherit;
	font-size: 0.95rem;
	background: var(--wp--preset--color--base, #fff);
	color: var(--kg-ink);
}
.kreativa-req textarea { resize: vertical; }
.kreativa-req input[type="text"]:focus,
.kreativa-req textarea:focus,
.kreativa-req select:focus { outline: 2px solid var(--kg-primary); border-color: transparent; }

.kreativa-req__choices { display: grid; gap: 0.45rem; }
.kreativa-req__choice {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--kg-border);
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.93rem;
}
.kreativa-req__choice:has(input:checked) { border-color: var(--kg-primary); background: var(--kg-soft); }
.kreativa-req__choice input { accent-color: var(--kg-primary); margin: 0; }
.kreativa-req__choice-label { flex: 1; }
.kreativa-req__choice-meta { font-weight: 600; font-size: 0.85rem; white-space: nowrap; color: var(--kg-primary); }

.kreativa-req.has-error .kreativa-req__choice,
.kreativa-req.has-error input[type="text"],
.kreativa-req.has-error textarea,
.kreativa-req.has-error select,
.kreativa-req.has-error .kreativa-upload__drop { border-color: #d92d20; }
.kreativa-req__error { margin: 0.4rem 0 0; color: #d92d20; font-size: 0.85rem; font-weight: 600; }

/* Upload */
.kreativa-upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kreativa-upload__drop {
	display: grid;
	gap: 0.25rem;
	justify-items: center;
	padding: 1.25rem;
	border: 2px dashed var(--kg-border);
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.kreativa-upload__drop:hover,
.kreativa-upload__drop.is-over { border-color: var(--kg-primary); background: var(--kg-soft); }
.kreativa-upload__input:focus-visible + .kreativa-upload__list,
.kreativa-upload:focus-within .kreativa-upload__drop { border-color: var(--kg-primary); }
.kreativa-upload__cta { font-weight: 700; color: var(--kg-primary); }
.kreativa-upload__rules { font-size: 0.8rem; color: var(--kg-muted); }
.kreativa-upload__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.kreativa-upload__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	background: var(--kg-soft);
	font-size: 0.88rem;
}
.kreativa-upload__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kreativa-upload__state { color: var(--kg-muted); font-size: 0.8rem; }
.kreativa-upload__list li.is-uploading { opacity: 0.7; }
.kreativa-upload__remove {
	border: 0;
	background: none;
	color: #d92d20;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

/* Dark mode */
html[data-theme="dark"] :is(.kreativa-packages__brief .required, .kreativa-req .required, .kreativa-req__error) { color: #fda29b; }