/* ==========================================================================
   Kinkers Warranty & Returns Registration — public page styles
   Palette + type driven by admin-editable CSS custom properties (see
   KCP_Warranty_Shortcode::enqueue_assets).
   ========================================================================== */

.kcpw-wrap {
	--kcpw-accent: #00C49A;
	--kcpw-secondary: #FF6F91;
	--kcpw-bg: #FFF8F6;
	--kcpw-text: #2B1B22;
	--kcpw-muted: #8A6F76;
	--kcpw-border: #F0DCD9;
	--kcpw-card: #FFFFFF;
	--kcpw-radius: 20px;
	--kcpw-font-display: 'Fraunces', Georgia, serif;
	--kcpw-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--kcpw-font-body);
	color: var(--kcpw-text);
	background: var(--kcpw-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.kcpw-wrap * ,
.kcpw-wrap *::before,
.kcpw-wrap *::after { box-sizing: border-box; }

.kcpw-wrap img { max-width: 100%; display: block; }

/* Buttons opt out of the generic anchor color reset below so their own
   text color always wins, regardless of rule order (see the Creator
   Partners CSS for the specificity bug this pattern avoids). */
.kcpw-wrap a:not(.kcpw-btn) { color: inherit; }

.kcpw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kcpw-secondary);
	margin: 0 0 14px;
}

.kcpw-wrap h1,
.kcpw-wrap h2,
.kcpw-wrap h3 {
	font-family: var(--kcpw-font-display);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}

/* -------------------- Hero -------------------- */
.kcpw-hero {
	position: relative;
	padding: 88px 24px 80px;
	background:
		radial-gradient(80% 60% at 85% 0%, rgba(0, 196, 154, 0.14), transparent 60%),
		radial-gradient(60% 50% at 5% 100%, rgba(255, 111, 145, 0.14), transparent 60%),
		var(--kcpw-bg);
	background-size: cover;
	background-position: center;
}

.kcpw-hero[style*="--kcpw-hero-bg"] {
	background-image: var(--kcpw-hero-bg), radial-gradient(80% 60% at 85% 0%, rgba(0,196,154,0.14), transparent 60%), radial-gradient(60% 50% at 5% 100%, rgba(255,111,145,0.14), transparent 60%);
	background-size: cover;
	background-position: center;
}

.kcpw-hero__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.kcpw-hero__heading {
	font-size: clamp(34px, 4.6vw, 54px);
	max-width: 16ch;
}

.kcpw-hero__sub {
	font-size: 18px;
	color: var(--kcpw-muted);
	max-width: 48ch;
	margin: 0 0 32px;
}

.kcpw-hero__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.kcpw-hero__note {
	font-size: 13px;
	color: var(--kcpw-muted);
}

.kcpw-hero__media img {
	border-radius: var(--kcpw-radius);
	box-shadow: 0 30px 60px -20px rgba(43, 27, 34, 0.25);
}

/* -------------------- Buttons -------------------- */
.kcpw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 30px;
	border-radius: 999px;
	font-family: var(--kcpw-font-body);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.kcpw-btn--primary {
	background: var(--kcpw-text);
	color: var(--kcpw-bg);
	box-shadow: 0 10px 24px -10px rgba(43, 27, 34, 0.45);
}

.kcpw-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(43, 27, 34, 0.5);
}

.kcpw-btn--submit {
	width: 100%;
	background: var(--kcpw-accent);
	color: #06231d;
	margin-top: 8px;
}

.kcpw-btn--submit:hover { transform: translateY(-2px); }

.kcpw-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

/* -------------------- Eligibility -------------------- */
.kcpw-eligibility {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 24px 88px;
}

.kcpw-section__head {
	max-width: 640px;
	margin: 0 0 32px;
}

.kcpw-section__head h2 { font-size: clamp(26px, 3.2vw, 36px); }

.kcpw-eligibility__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.kcpw-eligibility__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--kcpw-card);
	border: 1px solid var(--kcpw-border);
	border-radius: 14px;
	padding: 16px 18px;
	font-size: 15px;
}

.kcpw-eligibility__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--kcpw-accent) 20%, white);
	color: #06231d;
	font-size: 13px;
	font-weight: 700;
}

.kcpw-eligibility__item--no .kcpw-eligibility__icon {
	background: #FDECEC;
	color: #9B2C2C;
}

/* -------------------- Form section -------------------- */
.kcpw-form-section {
	padding: 40px 24px 110px;
	background: linear-gradient(180deg, transparent, rgba(255, 111, 145, 0.08));
}

.kcpw-form-section__inner {
	max-width: 760px;
	margin: 0 auto;
}

.kcpw-section__head--form { text-align: center; margin-left: auto; margin-right: auto; }
.kcpw-section__head--form .kcpw-eyebrow { justify-content: center; width: 100%; }

.kcpw-form-section__sub {
	color: var(--kcpw-muted);
	font-size: 16px;
	max-width: 48ch;
	margin: 0 auto;
}

.kcpw-form-card {
	background: var(--kcpw-card);
	border: 1px solid var(--kcpw-border);
	border-radius: 28px;
	padding: 40px;
	margin-top: 36px;
	box-shadow: 0 40px 80px -40px rgba(43, 27, 34, 0.2);
}

.kcpw-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.kcpw-field { display: flex; flex-direction: column; gap: 8px; }
.kcpw-field--full { margin-bottom: 18px; }

.kcpw-field label,
.kcpw-field-legend {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--kcpw-text);
}

.kcpw-field .req,
.kcpw-field-legend .req { color: var(--kcpw-secondary); }

.kcpw-field input,
.kcpw-field select,
.kcpw-field textarea {
	font-family: var(--kcpw-font-body);
	font-size: 15px;
	padding: 13px 15px;
	border-radius: 12px;
	border: 1.5px solid var(--kcpw-border);
	background: #FFFDFC;
	color: var(--kcpw-text);
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kcpw-field input:focus,
.kcpw-field select:focus,
.kcpw-field textarea:focus {
	outline: none;
	border-color: var(--kcpw-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kcpw-accent) 18%, transparent);
}

.kcpw-field textarea { resize: vertical; min-height: 90px; }

.kcpw-field input[type="file"] {
	padding: 10px 12px;
	font-size: 13.5px;
}

.kcpw-field__hint {
	font-size: 12px;
	color: var(--kcpw-muted);
}

.kcpw-field.kcpw-field--error input,
.kcpw-field.kcpw-field--error select,
.kcpw-field.kcpw-field--error textarea {
	border-color: #E24C4B;
}

.kcpw-field__error {
	font-size: 12.5px;
	color: #E24C4B;
}

.kcpw-radio-group {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.kcpw-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--kcpw-border);
	border-radius: 12px;
	padding: 12px 16px;
	cursor: pointer;
	font-size: 14px;
	flex: 1 1 200px;
}

.kcpw-radio input {
	accent-color: var(--kcpw-accent);
	width: 16px;
	height: 16px;
}

.kcpw-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: var(--kcpw-muted);
	margin: 6px 0 18px;
	cursor: pointer;
}

.kcpw-checkbox input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--kcpw-accent);
	flex-shrink: 0;
}

/* Honeypot — visually hidden but present in the DOM. */
.kcpw-hp-field {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.kcpw-form-feedback {
	border-radius: 14px;
	padding: 16px 18px;
	font-size: 14.5px;
	margin-bottom: 20px;
}

.kcpw-form-feedback[data-kind="error"] {
	background: #FDECEC;
	color: #9B2C2C;
}

.kcpw-form-feedback[data-kind="success"] {
	background: color-mix(in srgb, var(--kcpw-accent) 18%, white);
	color: #06231d;
}

.kcpw-form-feedback[data-kind="notice"] {
	background: #FFF3D6;
	color: #7A5300;
}

.kcpw-form-success h3 {
	font-size: 24px;
	margin-bottom: 8px;
}

.kcpw-form-success p {
	color: var(--kcpw-muted);
	margin: 0;
}

.kcpw-form-success .kcpw-form-success__notice {
	margin-top: 14px;
	background: #FFF3D6;
	color: #7A5300;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
}

/* -------------------- Footer note -------------------- */
.kcpw-footer-note {
	text-align: center;
	font-size: 12.5px;
	color: var(--kcpw-muted);
	max-width: 60ch;
	margin: 0 auto;
	padding: 0 24px 64px;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 900px) {
	.kcpw-hero__inner { grid-template-columns: 1fr; }
	.kcpw-hero__media { order: -1; }
}

@media (max-width: 640px) {
	.kcpw-hero { padding: 60px 18px 56px; }
	.kcpw-hero__heading { max-width: none; }
	.kcpw-eligibility { padding: 12px 18px 56px; }
	.kcpw-form-section { padding: 12px 16px 72px; }
	.kcpw-form-card { padding: 26px 20px; border-radius: 22px; }
	.kcpw-form-row { grid-template-columns: 1fr; gap: 14px; }
	.kcpw-hero__actions { flex-direction: column; align-items: flex-start; }
	.kcpw-btn--primary:not(.kcpw-btn--submit) { width: 100%; text-align: center; justify-content: center; }
	.kcpw-radio { flex: 1 1 100%; }
}

@media (max-width: 400px) {
	.kcpw-form-card { padding: 20px 16px; }
}