/* CloudStaffed AI Resume Maker — Neon Nexus dark theme (v1.0.4) */

/* Hide cs-theme home hero on the landing page so there is no flashback */
body.page-id-1271 main,
body.page-id-1271 footer,
body.page-id-1271 header,
body.page-id-1271 nav { display: none !important; }
body.page-id-1271 { background: #131313 !important; overflow: hidden !important; }

/* Landing wrapper: replaces the home hero with a themed full-viewport experience */
.cs-ai-landing-wrap {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 80, 110, 0.12), transparent 60%),
		#131313;
	color: #e5e2e1;
	overflow: auto;
	padding: clamp(56px, 9vw, 110px) 16px clamp(40px, 6vw, 80px);
	font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
.cs-ai-landing-back {
	position: absolute;
	top: 28px; left: 28px;
	color: rgba(170, 136, 138, 0.9);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: color 0.2s ease;
	font-family: inherit;
}
.cs-ai-landing-back:hover { color: #ffb2b8; }

.cs-ai-landing-inner { max-width: 760px; margin: 0 auto; }

.cs-ai-landing-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(0, 218, 243, 0.08);
	color: #00daf3;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin-bottom: 24px;
}
.cs-ai-landing-eyebrow::before {
	content: '';
	display: block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #00daf3;
	box-shadow: 0 0 10px #00daf3;
	animation: cs-pulse 2.4s ease-in-out infinite;
}
@keyframes cs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.cs-ai-landing-title {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: clamp(36px, 5.5vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 18px;
}
.cs-ai-landing-title .cs-ai-landing-accent { color: #ffb2b8; }
.cs-ai-landing-lede {
	color: rgba(229, 226, 225, 0.65);
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 36px;
	max-width: 600px;
}

/* === Form / preview card === */
#cs-ai-resume-root,
#cs-ai-resume-root * { box-sizing: border-box; }
#cs-ai-resume-root {
	max-width: 760px;
	margin: 0;
	padding: 32px;
	background: #1c1b1b;
	color: #e5e2e1;
	font-family: inherit;
	border-radius: 16px;
	box-shadow: 0 0 0 1px rgba(170, 136, 138, 0.08), 0 30px 60px rgba(0, 0, 0, 0.4);
}
#cs-ai-resume-root .cs-ai-form { display: grid; gap: 18px; padding: 0; background: transparent; border: 0; border-radius: 0; }
#cs-ai-resume-root .cs-ai-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { #cs-ai-resume-root .cs-ai-row { grid-template-columns: 1fr; } }
#cs-ai-resume-root .cs-ai-form label {
	display: grid; gap: 8px;
	font-size: 12px; color: rgba(227, 189, 191, 0.85);
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
}
#cs-ai-resume-root .cs-ai-form input[type="text"],
#cs-ai-resume-root .cs-ai-form input[type="email"],
#cs-ai-resume-root .cs-ai-form input[type="tel"],
#cs-ai-resume-root .cs-ai-form select,
#cs-ai-resume-root .cs-ai-form textarea {
	padding: 13px 14px;
	border: 1px solid rgba(170, 136, 138, 0.18);
	border-radius: 10px;
	font-size: 15px; line-height: 1.4;
	width: 100%;
	background: #131313; color: #f5f3f2;
	font-family: 'Inter', sans-serif; font-weight: 400;
	text-transform: none; letter-spacing: normal;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#cs-ai-resume-root .cs-ai-form input::placeholder,
#cs-ai-resume-root .cs-ai-form textarea::placeholder { color: rgba(229, 226, 225, 0.35); }
#cs-ai-resume-root .cs-ai-form input:focus,
#cs-ai-resume-root .cs-ai-form select:focus,
#cs-ai-resume-root .cs-ai-form textarea:focus {
	outline: none;
	border-color: #ff506e;
	box-shadow: 0 0 0 3px rgba(255, 80, 110, 0.18);
}
#cs-ai-resume-root .cs-ai-form select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23aa888a' d='M6 8 0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 38px;
}
#cs-ai-resume-root .cs-ai-form textarea { resize: vertical; min-height: 180px; }
#cs-ai-resume-root .cs-ai-input-choice { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
#cs-ai-resume-root .cs-ai-input-choice legend {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 12px; font-weight: 600;
	color: rgba(227, 189, 191, 0.85);
	text-transform: uppercase; letter-spacing: 0.12em;
	margin-bottom: 8px; padding: 0;
}
#cs-ai-resume-root .cs-ai-input-choice label {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400;
	text-transform: none; letter-spacing: normal; color: #e5e2e1;
}
#cs-ai-resume-root .cs-ai-input-choice input[type="radio"] { accent-color: #ff506e; }
#cs-ai-resume-root .cs-ai-consent {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13px; color: rgba(229, 226, 225, 0.7); line-height: 1.5;
}
#cs-ai-resume-root .cs-ai-consent input[type="checkbox"] { accent-color: #ff506e; margin-top: 2px; width: 16px; height: 16px; }
#cs-ai-resume-root .cs-ai-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
#cs-ai-resume-root .cs-ai-file {
	padding: 12px; background: #131313;
	border: 1px dashed rgba(170, 136, 138, 0.35); border-radius: 10px; color: #e5e2e1;
}
#cs-ai-resume-root .cs-ai-submit {
	padding: 16px 28px;
	background: linear-gradient(135deg, #ffb2b8 0%, #ff506e 100%);
	color: #131313; border: 0; border-radius: 10px;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 14px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
	cursor: pointer; width: auto; justify-self: start;
	box-shadow: 0 12px 32px rgba(255, 80, 110, 0.25);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#cs-ai-resume-root .cs-ai-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 40px rgba(255, 80, 110, 0.35);
}
#cs-ai-resume-root .cs-ai-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
#cs-ai-resume-root .cs-ai-status { min-height: 22px; color: rgba(229, 226, 225, 0.65); font-size: 13px; }
#cs-ai-resume-root .cs-ai-status.error { color: #ffb4ab; }

/* === Preview / result === */
#cs-ai-resume-root .cs-ai-preview {
	padding: 28px;
	background: #131313;
	border: 1px solid rgba(170, 136, 138, 0.12);
	border-radius: 14px;
	margin-top: 28px;
	color: #e5e2e1;
}
#cs-ai-resume-root .cs-ai-preview h2 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	margin: 0 0 6px; color: #fff;
	font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
}
#cs-ai-resume-root .cs-ai-preview .contact { color: rgba(229, 226, 225, 0.55); margin: 0 0 22px; font-size: 13px; }
#cs-ai-resume-root .cs-ai-preview h3 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	margin: 24px 0 10px;
	font-size: 11px; font-weight: 700;
	color: #00daf3;
	text-transform: uppercase; letter-spacing: 0.25em;
	border: 0; padding: 0;
}
#cs-ai-resume-root .cs-ai-preview article { margin-bottom: 18px; }
#cs-ai-resume-root .cs-ai-preview strong { color: #fff; font-weight: 600; }
#cs-ai-resume-root .cs-ai-preview em {
	color: rgba(229, 226, 225, 0.55);
	font-style: normal; font-size: 12px;
	display: block; margin-top: 2px;
}
#cs-ai-resume-root .cs-ai-preview ul { margin: 8px 0 0 18px; padding: 0; }
#cs-ai-resume-root .cs-ai-preview li {
	margin-bottom: 5px; font-size: 14px;
	color: rgba(229, 226, 225, 0.85); line-height: 1.5;
}
#cs-ai-resume-root .cs-ai-preview p {
	color: rgba(229, 226, 225, 0.85);
	font-size: 14px; line-height: 1.6; margin: 8px 0;
}
#cs-ai-resume-root .cs-ai-preview .details { color: rgba(229, 226, 225, 0.55); font-size: 12px; }
#cs-ai-resume-root .cs-ai-download {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 22px; padding: 14px 24px;
	background: linear-gradient(135deg, #ffb2b8 0%, #ff506e 100%);
	color: #131313; border-radius: 10px; text-decoration: none;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: 0.12em;
	box-shadow: 0 12px 32px rgba(255, 80, 110, 0.25);
	transition: transform 0.18s ease;
}
#cs-ai-resume-root .cs-ai-download:hover { transform: translateY(-1px); color: #131313; }