/*
 * CTW 2027 "I'm attending" badge generator (pages/badge-generator.php).
 * Adapted from the approved Claude Design export. Every rule is scoped to #ctw-badge.
 */

/* Fonts ------------------------------------------------------------------
 * "CTW Badge Inter": Inter (SIL OFL 1.1, see assets/fonts/badge-generator/OFL-Inter.txt)
 * at its default optical size, as used by the Figma badge artwork. Drawn into the canvases.
 * "CTW Badge Noto Sans": intro paragraph only, from the Netevia design system export.
 */
@font-face { font-family: 'CTW Badge Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/badge-generator/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'CTW Badge Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/badge-generator/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'CTW Badge Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/badge-generator/inter-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'CTW Badge Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/badge-generator/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'CTW Badge Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/badge-generator/inter-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'CTW Badge Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/badge-generator/inter-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'CTW Badge Noto Sans'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/badge-generator/NotoSans-Regular.ttf') format('truetype'); }

/* Page shell ------------------------------------------------------------- */
/* This page only: the theme's overflow-x-hidden body class makes <body> a scroll
   container, which stops the sticky preview. clip hides overflow the same way
   without creating a scroll container (older browsers keep the theme's hidden). */
body.page-template-pagesbadge-generator-php { overflow-x: clip; }

#ctw-badge { position: relative; display: block; min-height: 100vh; padding-top: var(--ctw-header-h, 96px); box-sizing: border-box;
	background: #141414; overflow-x: hidden; overflow-x: clip; color: #fff;
	font-family: 'Inter', 'CTW Badge Inter', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
#ctw-badge *, #ctw-badge *::before, #ctw-badge *::after { box-sizing: border-box; }
#ctw-badge [hidden] { display: none !important; }
#ctw-badge input::placeholder { color: rgba(255,255,255,0.35); opacity: 1; }
#ctw-badge .ctw-icon { width: 1em; height: 1em; display: block; flex: 0 0 auto; }
#ctw-badge .ctw-sr-only,
#ctw-badge .ctw-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#ctw-badge fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#ctw-badge legend { padding: 0; margin-bottom: 8px; }

/* background photo + fade */
#ctw-badge .ctw-bg { position: absolute; inset: var(--ctw-header-h, 96px) 0 auto 0; height: min(100vh, 900px); pointer-events: none; }
#ctw-badge .ctw-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; display: block; }
#ctw-badge .ctw-bg-fade { position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,20,0.7) 0%, rgba(20,20,20,0.55) 30%, rgba(20,20,20,0.85) 65%, #141414 100%); }

/* layout */
#ctw-badge .ctw-main { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
	padding: clamp(24px,5vw,56px) clamp(20px,5vw,40px) 96px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,400px), 1fr)); gap: clamp(28px,5vw,48px); align-items: start; }
#ctw-badge .ctw-form { display: flex; flex-direction: column; gap: 28px; min-width: 0; margin: 0; }

/* intro */
#ctw-badge .ctw-intro { display: flex; flex-direction: column; gap: 16px; }
#ctw-badge .ctw-eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,0.85); }
#ctw-badge .ctw-eyebrow-dot { width: 6px; height: 6px; background: #7B95FF; flex: 0 0 6px; }
#ctw-badge .ctw-h1 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(40px,5.5vw,72px); font-weight: 500;
	line-height: 1; letter-spacing: -0.035em; text-wrap: balance; color: #fff; }
#ctw-badge .ctw-accent { color: #7B95FF; }
#ctw-badge .ctw-lead { margin: 0; font-family: 'CTW Badge Noto Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; letter-spacing: 0.15px;
	font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.72); max-width: 520px; }

/* labels & groups */
#ctw-badge .ctw-field-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#ctw-badge .ctw-label { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,0.85); }
#ctw-badge .ctw-optional { font-weight: 400; color: rgba(255,255,255,0.5); }
#ctw-badge .ctw-error { font-size: 13px; line-height: 1.4; color: #FF8A8A; }

/* photo upload */
#ctw-badge .ctw-upload { display: flex; align-items: center; gap: 16px; padding: 16px; background: rgba(27,27,27,0.85);
	border: 1px dashed rgba(255,255,255,0.25); border-radius: 16px; cursor: pointer; transition: border-color 200ms ease-out; }
#ctw-badge .ctw-upload:hover,
#ctw-badge .ctw-upload.is-dragover { border-color: #7B95FF; }
#ctw-badge .ctw-file:focus-visible + .ctw-upload { outline: 2px solid #7B95FF; outline-offset: 2px; }
#ctw-badge .ctw-upload.is-invalid { border-color: #FF8A8A; }
#ctw-badge .ctw-avatar { width: 56px; height: 56px; border-radius: 100px; display: block; flex: 0 0 56px; }
#ctw-badge .ctw-avatar-empty { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 100px; background: rgba(255,255,255,0.08);
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; }
#ctw-badge .ctw-upload-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ctw-badge .ctw-upload-title { font-size: 16px; font-weight: 500; color: #fff; }
#ctw-badge .ctw-upload-hint { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.55); }
#ctw-badge .ctw-photo-controls { display: flex; flex-direction: column; gap: 4px; }
#ctw-badge .ctw-sliders { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; padding-top: 8px; }
#ctw-badge .ctw-slider-label { font-size: 14px; color: rgba(255,255,255,0.6); }
#ctw-badge .ctw-sliders input[type="range"] { width: 100%; min-height: 24px; accent-color: #7B95FF; }
#ctw-badge .ctw-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding-top: 4px; min-height: 32px; }
#ctw-badge .ctw-check input { width: 18px; height: 18px; margin: 0; accent-color: #7B95FF; }

/* text fields */
/* First | Last, then Job title | Company; one column on small screens (see 520px breakpoint) */
#ctw-badge .ctw-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#ctw-badge .ctw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#ctw-badge .ctw-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; font-family: inherit;
	font-size: 16px; background: rgba(27,27,27,0.85); color: #fff; outline: none; box-shadow: none; transition: border-color 200ms ease-out; }
#ctw-badge .ctw-input:focus { border-color: #7B95FF; box-shadow: 0 0 0 1px #7B95FF; }
#ctw-badge .ctw-input[aria-invalid="true"] { border-color: #FF8A8A; }

/* chips (style / accent / download choice) */
#ctw-badge .ctw-chips { display: flex; gap: 12px; flex-wrap: wrap; }
#ctw-badge .ctw-chips--tight { gap: 10px; }
#ctw-badge .ctw-chip { position: relative; display: flex; align-items: center; border-radius: 100px; cursor: pointer; font-family: inherit; color: #fff;
	background: rgba(27,27,27,0.85); border: 1px solid rgba(255,255,255,0.18); margin: 1px; transition: border-color 200ms ease-out; }
#ctw-badge .ctw-chip:hover { border-color: rgba(255,255,255,0.4); }
#ctw-badge .ctw-chip.is-selected { border: 2px solid #7B95FF; margin: 0; }
#ctw-badge .ctw-chip:focus-within { outline: 2px solid rgba(123,149,255,0.6); outline-offset: 2px; }
#ctw-badge .ctw-chip:has(input:focus:not(:focus-visible)) { outline: none; }
#ctw-badge .ctw-chip--style { gap: 12px; padding: 6px 18px 6px 6px; }
#ctw-badge .ctw-chip--style .ctw-chip-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); }
#ctw-badge .ctw-style-thumb { width: 52px; height: 30px; border-radius: 100px; display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; letter-spacing: 0.5px; background: var(--ctw-accent, #fff); color: var(--ctw-accent-ink, #141414); }
#ctw-badge .ctw-style-thumb--outline { background: transparent; color: #fff; border: 2px solid var(--ctw-accent, #fff); }
#ctw-badge .ctw-chip--accent { gap: 10px; min-height: 44px; padding: 0 18px 0 11px; font-size: 14px; font-weight: 500; }
#ctw-badge .ctw-swatch { width: 22px; height: 22px; border-radius: 100px; display: block; }
#ctw-badge .ctw-swatch--white { border: 1px solid rgba(0,0,0,0.2); }
#ctw-badge .ctw-chip--output { gap: 8px; min-height: 44px; padding: 0 18px 0 14px; font-size: 14px; font-weight: 500; }
#ctw-badge .ctw-chip--output .ctw-icon { font-size: 18px; }

/* download */
#ctw-badge .ctw-download-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#ctw-badge .ctw-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 6px 6px 26px;
	border: 0; border-radius: 100px; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2;
	background: #5B7FF7; color: #fff; cursor: pointer; transition: background 200ms ease-out; }
#ctw-badge .ctw-download:hover:not(:disabled) { background: #4A6CE8; }
#ctw-badge .ctw-download:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#ctw-badge .ctw-download:disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.38); cursor: default; }
#ctw-badge .ctw-download[aria-busy="true"] { cursor: progress; }
#ctw-badge .ctw-download-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 100px; background: rgba(255,255,255,0.18);
	display: flex; align-items: center; justify-content: center; font-size: 20px; }
#ctw-badge .ctw-download[aria-busy="true"] .ctw-download-icon .ctw-icon { animation: ctw-pulse 900ms ease-in-out infinite alternate; }
@keyframes ctw-pulse { from { opacity: 1; transform: translateY(-2px); } to { opacity: 0.4; transform: translateY(2px); } }
#ctw-badge .ctw-download-hint { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.55); }
#ctw-badge .ctw-status { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.75); }
#ctw-badge .ctw-status:empty { display: none; }
#ctw-badge .ctw-status.is-error { color: #FF8A8A; }
#ctw-badge .ctw-zip { padding: 4px 0; border: 0; background: none; font-family: inherit; font-size: 13px; color: #7B95FF;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#ctw-badge .ctw-zip:hover { color: #A9BBFF; }

/* previews */
#ctw-badge .ctw-preview { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#ctw-badge .ctw-preview-linkedin { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
#ctw-badge .ctw-preview canvas { width: 100%; height: auto; display: block; max-width: 100%; background: #121212; }
#ctw-badge .ctw-preview-email { margin-top: 12px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 20px 30px rgba(0,0,0,0.45); }
#ctw-badge .ctw-caption { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.55); text-align: center; }

/* email-signature tutorial */
#ctw-badge .ctw-tuto { margin-top: 12px; display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; background: rgba(27,27,27,0.85);
	border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }
#ctw-badge .ctw-tuto-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 32px; padding: 0; border: 0;
	background: transparent; color: #fff; font-family: inherit; cursor: pointer; text-align: left; }
#ctw-badge .ctw-tuto-toggle:focus-visible { outline: 2px solid #7B95FF; outline-offset: 4px; border-radius: 4px; }
#ctw-badge .ctw-tuto-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
#ctw-badge .ctw-tuto-title .ctw-icon { font-size: 20px; color: #7B95FF; }
#ctw-badge .ctw-tuto-chevron { font-size: 22px; color: rgba(255,255,255,0.7); transition: transform 200ms ease-out; }
#ctw-badge .ctw-tuto-toggle[aria-expanded="true"] .ctw-tuto-chevron { transform: rotate(180deg); }
#ctw-badge .ctw-tuto-body { display: flex; flex-direction: column; gap: 16px; }
#ctw-badge .ctw-tuto-intro { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.8); }
#ctw-badge .ctw-tabs-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
#ctw-badge .ctw-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,0.06); border-radius: 100px; }
#ctw-badge .ctw-tab { height: 32px; padding: 0 16px; border: 0; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
	background: transparent; color: rgba(255,255,255,0.75); transition: background 200ms ease-out, color 200ms ease-out; }
#ctw-badge .ctw-tab.is-selected { background: #fff; color: #141414; }
#ctw-badge .ctw-tab:focus-visible { outline: 2px solid #7B95FF; outline-offset: 2px; }
#ctw-badge .ctw-tab-panel { display: flex; flex-direction: column; gap: 16px; }
#ctw-badge .ctw-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
#ctw-badge .ctw-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.8); }
#ctw-badge .ctw-step-n { width: 24px; height: 24px; border-radius: 100px; background: rgba(123,149,255,0.18); color: #7B95FF; font-size: 12px; font-weight: 600;
	display: flex; align-items: center; justify-content: center; }
#ctw-badge .ctw-tuto-tip { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); }

/* responsive (export breakpoints: preview moves above the form below 880px) */
@media (max-width: 879.98px) {
	#ctw-badge .ctw-preview { position: static; order: -1; }
	/* keep the square preview inside the viewport on short (landscape) screens */
	#ctw-badge .ctw-preview-linkedin { width: min(100%, 70vh); min-width: min(100%, 280px); margin-inline: auto; }
}
@media (max-width: 519.98px) {
	#ctw-badge .ctw-fields { grid-template-columns: minmax(0, 1fr); }
	#ctw-badge .ctw-chip--style { padding-right: 14px; }
	#ctw-badge .ctw-chip--accent,
	#ctw-badge .ctw-chip--output { padding-right: 14px; }
	#ctw-badge .ctw-download { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	#ctw-badge * { transition: none !important; animation: none !important; }
}