/* Tattoo Days Forms v2.2 — CI: Space Grotesk, Hanson, Cyan #81e4e4 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;700;900&display=swap');

@font-face {
	font-family: 'Hanson';
	src: url('https://tattoo-days.de/wp-content/uploads/2025/04/Hanson-Bold-1.woff2') format('woff2'),
		url('https://tattoo-days.de/wp-content/uploads/2026/03/Hanson-Bold.woff') format('woff'),
		url('https://tattoo-days.de/wp-content/uploads/2025/04/Hanson-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* === Canvas === */

#td-form-canvas.td-form-canvas {
	--cyan: #81e4e4;
	--dark: #000000;
	--grey: #1a1a1a;
	--white: #ffffff;
	--border: rgba(255, 255, 255, 0.1);
	--transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);

	font-family: 'Space Grotesk', sans-serif;
	color: var(--white);
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(12px, 4vw, 24px);
	overflow-x: clip;
}

#td-form-canvas *,
#td-form-canvas *::before,
#td-form-canvas *::after { box-sizing: border-box; min-width: 0; }

#td-form-canvas .sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* === Honeypot === */
#td-form-canvas .td-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }

/* === Notices === */
#td-form-canvas .td-form-notice {
	padding: 16px 20px;
	margin-bottom: 24px;
	border-left: 4px solid var(--cyan);
	background: var(--grey);
	scroll-margin-top: 24px;
}

#td-form-canvas .td-form-notice--prominent {
	padding: clamp(20px, 5vw, 28px) clamp(18px, 4vw, 28px);
	margin-bottom: clamp(24px, 5vw, 36px);
	border: 2px solid transparent;
	border-left-width: 6px;
}

#td-form-canvas .td-form-notice--success.td-form-notice--prominent {
	background: rgba(129, 228, 228, 0.16);
	border-color: var(--cyan);
	border-left-color: var(--cyan);
	box-shadow: 0 0 0 1px rgba(129, 228, 228, 0.25), 8px 8px 0 rgba(129, 228, 228, 0.12);
}

#td-form-canvas .td-form-notice--error.td-form-notice--prominent {
	background: rgba(255, 107, 107, 0.12);
	border-color: #ff6b6b;
	border-left-color: #ff6b6b;
	box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2), 8px 8px 0 rgba(255, 107, 107, 0.1);
}

#td-form-canvas .td-form-notice__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

#td-form-canvas .td-form-notice__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
	border-radius: 50%;
}

#td-form-canvas .td-form-notice--success .td-form-notice__icon {
	background: var(--cyan);
	color: var(--dark);
}

#td-form-canvas .td-form-notice--error .td-form-notice__icon {
	background: #ff6b6b;
	color: var(--dark);
}

#td-form-canvas .td-form-notice__badge {
	margin: 0;
	font-family: 'Hanson', sans-serif;
	font-size: clamp(18px, 4.5vw, 24px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.15;
	color: var(--white);
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
}

#td-form-canvas .td-form-notice--success .td-form-notice__badge {
	color: var(--cyan);
}

#td-form-canvas .td-form-notice--error .td-form-notice__badge {
	color: #ff8f8f;
}

#td-form-canvas .td-form-notice__message {
	margin: 0;
	font-size: clamp(15px, 3.8vw, 17px);
	line-height: 1.65;
	font-weight: 500;
	color: var(--white);
	word-wrap: break-word;
}

#td-form-canvas .td-form-notice p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
#td-form-canvas .td-form-notice p:last-child { margin-bottom: 0; }

#td-form-canvas .td-form-notice__sub {
	margin-top: 14px !important;
	padding: 12px 14px;
	font-size: 14px !important;
	line-height: 1.6 !important;
	opacity: 1 !important;
	background: rgba(0, 0, 0, 0.25);
	border-left: 3px solid var(--cyan);
}

#td-form-canvas .td-form-notice__fields {
	margin-top: 16px;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 107, 107, 0.35);
}

#td-form-canvas .td-form-notice__fields-label {
	margin: 0 0 8px !important;
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #ff8f8f !important;
}

#td-form-canvas .td-form-notice__fields-list {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--white);
}

#td-form-canvas .td-form-notice__fields-list li {
	margin-bottom: 4px;
	word-wrap: break-word;
}

#td-form-canvas .td-form-notice__fields-list li:last-child {
	margin-bottom: 0;
}

#td-form-canvas .td-form-draft-notice {
	border-left-color: var(--cyan);
	margin-bottom: 24px;
}

#td-form-canvas .td-form-draft-notice__actions {
	margin-top: 10px !important;
	margin-bottom: 0 !important;
}

#td-form-canvas .td-form-draft-notice__clear {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cyan);
	text-decoration: underline;
}

/* === 2-Column Layout === */
#td-form-canvas .td-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 44px) clamp(32px, 4vw, 56px);
}

#td-form-canvas .td-layout__left,
#td-form-canvas .td-layout__right { min-width: 0; }

@media (min-width: 900px) {
	#td-form-canvas .td-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 0 clamp(32px, 4vw, 56px);
	}
}

/* === Sections === */
#td-form-canvas .td-form-section { margin-bottom: clamp(28px, 4vw, 44px); }

#td-form-canvas .td-form-section__title {
	font-family: 'Hanson', sans-serif;
	font-size: clamp(20px, 2.5vw, 28px);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 6px;
	line-height: 1.1;
	word-wrap: break-word;
}

#td-form-canvas .td-form-section__lead { margin: 0 0 18px; opacity: 0.6; font-size: 13px; line-height: 1.5; }

#td-form-canvas .td-form-hint,
#td-form-canvas .td-form-stand-intro { font-size: 13px; opacity: 0.55; margin: 0 0 14px; line-height: 1.5; }

#td-form-canvas .td-form-warning {
	margin-top: 20px; padding: 14px 16px; background: var(--grey);
	border-left: 4px solid var(--cyan); font-size: 11px;
	text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.6;
	word-wrap: break-word;
}

/* === Inline rows === */
#td-form-canvas .td-form-row {
	display: grid;
	gap: 14px;
	margin-bottom: 0;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 540px) {
	#td-form-canvas .td-form-row--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	#td-form-canvas .td-form-row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* === Fields === */
#td-form-canvas .td-field { margin-bottom: 14px; min-width: 0; }

#td-form-canvas .td-field label {
	display: block; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
	line-height: 1.3;
}

#td-form-canvas .td-req { color: var(--cyan); }

#td-form-canvas .td-field input[type='text'],
#td-form-canvas .td-field input[type='email'],
#td-form-canvas .td-field input[type='tel'],
#td-form-canvas .td-field input[type='url'],
#td-form-canvas .td-field input[type='number'],
#td-form-canvas .td-field textarea {
	width: 100%;
	max-width: 100%;
	background: var(--grey);
	border: 1px solid var(--border);
	color: var(--white);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}

@media (min-width: 640px) {
	#td-form-canvas .td-field input[type='text'],
	#td-form-canvas .td-field input[type='email'],
	#td-form-canvas .td-field input[type='tel'],
	#td-form-canvas .td-field input[type='url'],
	#td-form-canvas .td-field input[type='number'],
	#td-form-canvas .td-field textarea { font-size: 14px; }
}

#td-form-canvas .td-field input:focus,
#td-form-canvas .td-field input:focus-visible,
#td-form-canvas .td-field textarea:focus,
#td-form-canvas .td-field textarea:focus-visible {
	outline: none;
	border-color: var(--cyan);
	box-shadow: inset 0 0 0 2px var(--cyan);
}

#td-form-canvas .td-field input::placeholder,
#td-form-canvas .td-field textarea::placeholder { color: rgba(255, 255, 255, 0.3); }

#td-form-canvas .td-field textarea { resize: vertical; min-height: 100px; }

/* === Stand radio options === */
#td-form-canvas .td-stand-options {
	border: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
	min-width: 0;
}
#td-form-canvas .td-stand-option { display: block; cursor: pointer; min-width: 0; }
#td-form-canvas .td-stand-option input { position: absolute; opacity: 0; pointer-events: none; }

#td-form-canvas .td-stand-option__box {
	display: block;
	padding: 13px 16px;
	background: var(--grey);
	border: 1px solid var(--border);
	font-size: 13px;
	line-height: 1.4;
	word-wrap: break-word;
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

#td-form-canvas .td-stand-option input:checked + .td-stand-option__box,
#td-form-canvas .td-stand-option:hover .td-stand-option__box {
	border-color: var(--cyan);
	background: var(--dark);
	box-shadow: inset 0 0 0 2px var(--cyan);
}

#td-form-canvas .td-stand-option input:focus-visible + .td-stand-option__box {
	outline: 2px solid var(--cyan);
	outline-offset: -2px;
}

/* === Tabs === */
#td-form-canvas .td-tabs { min-width: 0; }

#td-form-canvas .td-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 0;
}

#td-form-canvas .td-tabs__btn {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	flex: 1 1 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--grey);
	color: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--border);
	border-bottom: none;
	transition: background var(--transition), color var(--transition);
	text-align: left;
	line-height: 1.3;
	word-wrap: break-word;
}

#td-form-canvas .td-tabs__btn + .td-tabs__btn { border-top: none; }

@media (min-width: 640px) {
	#td-form-canvas .td-tabs__btn {
		flex: 1 1 0;
		text-align: center;
		padding: 10px 12px;
	}
	#td-form-canvas .td-tabs__btn + .td-tabs__btn { border-top: 1px solid var(--border); }
}

#td-form-canvas .td-tabs__btn--active,
#td-form-canvas .td-tabs__btn:hover {
	background: var(--cyan);
	color: var(--dark);
}

#td-form-canvas .td-tabs__panel {
	display: none;
	padding: 20px;
	background: var(--grey);
	border: 1px solid var(--border);
	border-top: none;
	font-size: 13px;
	line-height: 1.6;
	word-wrap: break-word;
}

#td-form-canvas .td-tabs__panel--active { display: block; }

#td-form-canvas .td-tabs__panel ul {
	margin: 8px 0 12px;
	padding-left: 20px;
}

#td-form-canvas .td-tabs__panel li { margin-bottom: 4px; }
#td-form-canvas .td-tabs__panel p { margin: 0 0 10px; }
#td-form-canvas .td-tabs__panel p:last-child { margin-bottom: 0; }

#td-form-canvas .td-info-important { color: var(--cyan); }

/* === Checkboxes === */
#td-form-canvas .td-checks { display: flex; flex-direction: column; gap: 12px; }

#td-form-canvas .td-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.5;
	min-width: 0;
}

#td-form-canvas .td-check input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	accent-color: var(--cyan);
}

#td-form-canvas .td-check span { min-width: 0; word-wrap: break-word; flex: 1; }

#td-form-canvas .td-check a { color: var(--cyan); text-decoration: underline; }

/* === Submit button — Tape style === */
#td-form-canvas .td-form-submit-wrap {
	position: relative;
	max-width: 420px;
	margin: 36px auto 0;
	padding: 4px 6px 6px 0;
}

#td-form-canvas .td-submit-shadow {
	position: absolute;
	inset: 7px 3px 0 6px;
	background: var(--dark);
	opacity: 0.4;
	z-index: 1;
	clip-path: polygon(
		2% 15%, 20% 8%, 45% 12%, 65% 5%, 85% 12%, 100% 6%, 95% 35%,
		100% 75%, 94% 98%, 70% 95%, 45% 100%, 20% 95%, 5% 98%, 0% 80%
	);
	pointer-events: none;
}

#td-form-canvas .td-submit-btn {
	all: unset;
	box-sizing: border-box;
	display: flex !important;
	width: 100% !important;
	position: relative;
	z-index: 2;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	background: var(--cyan) !important;
	color: var(--dark) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(15px, 2.2vw, 19px);
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	line-height: 1.2;
	transition: transform 0.2s cubic-bezier(0.2,0,0,1), filter 0.2s;
	clip-path: polygon(
		0% 8%, 12% 2%, 28% 7%, 45% 0%, 72% 5%, 92% 1%, 100% 12%,
		98% 45%, 100% 85%, 88% 95%, 62% 91%, 38% 100%, 12% 94%, 0% 88%
	);
}

#td-form-canvas .td-submit-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.3;
	mix-blend-mode: multiply;
	pointer-events: none;
}

@media (hover: hover) {
	#td-form-canvas .td-form-submit-wrap:hover .td-submit-btn {
		transform: translate(-2px, -2px);
		filter: brightness(1.08);
	}
}

#td-form-canvas .td-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* === Support-Hinweis === */
#td-form-canvas .td-form-support {
	margin-top: 36px;
	padding: 22px 24px;
	background: rgba(129, 228, 228, 0.14);
	border: 2px solid var(--cyan);
	box-shadow: 0 0 0 1px rgba(129, 228, 228, 0.2), 6px 6px 0 rgba(129, 228, 228, 0.15);
}

#td-form-canvas .td-form-support__title {
	margin: 0 0 10px;
	font-family: 'Hanson', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--dark);
	background: var(--cyan);
	display: inline-block;
	padding: 6px 12px;
	line-height: 1.2;
}

#td-form-canvas .td-form-support__text {
	margin: 14px 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--white);
	font-weight: 500;
}

#td-form-canvas .td-form-support__links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

#td-form-canvas .td-form-support__links a {
	display: inline-block;
	padding: 10px 16px;
	background: var(--cyan);
	color: var(--dark) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	transition: transform var(--transition), filter var(--transition);
}

#td-form-canvas .td-form-support__links a:hover {
	transform: translate(-2px, -2px);
	filter: brightness(1.08);
}

#td-form-canvas .td-form-support__sep {
	display: none;
}

/* === Small-screen polish (<= 640px) === */
@media (max-width: 640px) {
	#td-form-canvas .td-form-section { margin-bottom: 28px; }
	#td-form-canvas .td-form-warning { font-size: 10px; padding: 12px 14px; }
	#td-form-canvas .td-form-submit-wrap { margin-top: 28px; max-width: 100%; }

	#td-form-canvas .td-form-notice--prominent {
		box-shadow: 0 0 0 1px rgba(129, 228, 228, 0.2), 4px 4px 0 rgba(129, 228, 228, 0.1);
	}

	#td-form-canvas .td-form-notice--error.td-form-notice--prominent {
		box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2), 4px 4px 0 rgba(255, 107, 107, 0.08);
	}

	#td-form-canvas .td-form-notice__icon {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}

	#td-form-canvas .td-form-support {
		padding: 18px 16px;
		box-shadow: 0 0 0 1px rgba(129, 228, 228, 0.2), 4px 4px 0 rgba(129, 228, 228, 0.1);
	}

	#td-form-canvas .td-form-support__links {
		flex-direction: column;
		align-items: stretch;
	}

	#td-form-canvas .td-form-support__links a {
		width: 100%;
		text-align: center;
		padding: 12px 16px;
		font-size: 12px;
		word-break: break-all;
	}
}

/* === Tablet (640px – 899px): kompaktere Sections === */
@media (min-width: 640px) and (max-width: 899px) {
	#td-form-canvas .td-form-section__title { font-size: 22px; }
	#td-form-canvas .td-tabs__panel { padding: 18px; }
}