/**
 * Delight Core CSS
 *
 * Core layout, theming variables, fullscreen overlay, question cards,
 * choice buttons, progress bar, result cards, and mobile responsive styles.
 *
 * @package GFDelight
 * @since   1.0.0
 */

/* ── CSS Custom Properties (Default Theme) ─────────────── */
:root {
	--gfd-primary: #6C63FF;
	--gfd-accent: #FF6584;
	--gfd-bg: #1a1a2e;
	--gfd-bg-card: #16213e;
	--gfd-text: #ffffff;
	--gfd-text-muted: #a0a0b8;
	--gfd-border: rgba(255, 255, 255, 0.1);
	--gfd-radius: 12px;
	--gfd-radius-lg: 20px;
	--gfd-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--gfd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ── Z-Index Layers ──────────────────────────────────────── */
.gfd-inline-capture       { z-index: 1; }
.gfd-fullscreen-overlay    { z-index: 999999; }
.gfd-feedback-overlay      { z-index: 1000000; }
.gfd-celebration           { z-index: 1000001; }
.gfd-progress-container    { z-index: 1000002; }
.gfd-progress-text         { z-index: 1000002; }
.gfd-milestone-badge       { z-index: 1000003; }

/* ── Body No-Scroll ──────────────────────────────────────── */
body.gfd-noscroll {
	overflow: hidden;
}

/* ── Hidden Fields ───────────────────────────────────────── */
.gfd-delight-enabled .gfd-hidden {
	display: none !important;
}

/* ── Start Button ────────────────────────────────────────── */
/* Override GF Orbital theme's --gf-local-bg-color on our buttons. */
.gfd-start-btn {
	display: inline-block;
	padding: 16px 48px !important;
	--gf-local-bg-color: var(--gfd-btn-color, var(--gfd-primary));
	background: var(--gfd-btn-color, var(--gfd-primary)) !important;
	background-color: var(--gfd-btn-color, var(--gfd-primary)) !important;
	color: var(--gfd-btn-text, #fff) !important;
	font-size: calc(1.2rem * var(--gfd-font-scale, 1)) !important;
	font-weight: 700;
	font-family: var(--gfd-font-family);
	border: none !important;
	border-radius: var(--gfd-radius) !important;
	cursor: pointer;
	transition: transform var(--gfd-transition), box-shadow var(--gfd-transition);
	line-height: 1;
}

.gfd-start-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.gfd-start-btn:active {
	transform: translateY(0);
}

/* ── Fullscreen Overlay ──────────────────────────────────── */
.gfd-fullscreen-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--gfd-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.5s ease;
	font-family: var(--gfd-font-family);
}

.gfd-fullscreen-overlay.gfd-visible {
	opacity: 1;
}

/* ── Close Button ────────────────────────────────────────── */
.gfd-close-btn {
	position: fixed;
	top: 16px;
	left: 24px;
	background: none;
	border: none;
	color: var(--gfd-text-muted);
	font-size: 2rem;
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color var(--gfd-transition), background var(--gfd-transition);
	z-index: 1000003;
	line-height: 1;
}

.gfd-close-btn:hover {
	color: var(--gfd-text);
	background: rgba(255, 255, 255, 0.1);
}

/* ── Progress Bar ────────────────────────────────────────── */
.gfd-progress-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
}

.gfd-progress-bar {
	height: 100%;
	background: var(--gfd-primary);
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 2px 2px 0;
}

.gfd-progress-text {
	position: fixed;
	top: 16px;
	right: 24px;
	color: var(--gfd-text-muted);
	font-size: 0.85rem;
	font-family: var(--gfd-font-family);
}

/* ── Welcome Screen ──────────────────────────────────────── */
.gfd-welcome {
	text-align: center;
}

.gfd-welcome-text {
	font-size: calc(1.8rem * var(--gfd-font-scale, 1));
	font-weight: 700;
	color: var(--gfd-text);
	line-height: 1.4;
}

/* ── Question Container ──────────────────────────────────── */
.gfd-question-container {
	max-width: calc(640px * var(--gfd-font-scale, 1));
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

/* ── Question Card ───────────────────────────────────────── */
.gfd-question-card {
	max-width: calc(640px * var(--gfd-font-scale, 1));
	width: 100%;
	text-align: center;
}

.gfd-question-number {
	font-size: calc(0.85rem * var(--gfd-font-scale, 1));
	color: var(--gfd-text-muted);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: var(--gfd-font-family);
}

.gfd-question-text {
	font-size: calc(1.6rem * var(--gfd-font-scale, 1));
	font-weight: 600;
	color: var(--gfd-text);
	line-height: 1.4;
	margin-bottom: 32px;
	font-family: var(--gfd-font-family);
}

/* ── Choice Buttons ──────────────────────────────────────── */
.gfd-choices {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: calc(540px * var(--gfd-font-scale, 1));
	margin: 0 auto;
}

.gfd-choice {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: var(--gfd-bg-card);
	border: 2px solid var(--gfd-border);
	border-radius: var(--gfd-radius);
	color: var(--gfd-text);
	font-size: calc(1rem * var(--gfd-font-scale, 1));
	font-family: var(--gfd-font-family);
	text-align: left;
	cursor: pointer;
	transition: all var(--gfd-transition);
	width: 100%;
	line-height: 1.4;
}

.gfd-choice:hover {
	border-color: var(--gfd-primary);
	transform: translateX(4px);
	background: rgba(108, 99, 255, 0.08);
}

.gfd-choice:focus-visible {
	outline: 2px solid var(--gfd-primary);
	outline-offset: 2px;
}

.gfd-choice.gfd-selected {
	border-color: var(--gfd-primary);
	background: rgba(108, 99, 255, 0.15);
	transform: scale(1.02);
}

.gfd-choice-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	font-weight: 700;
	font-size: 0.9rem;
	flex-shrink: 0;
	transition: background var(--gfd-transition);
}

.gfd-choice.gfd-selected .gfd-choice-letter {
	background: var(--gfd-primary);
}

.gfd-choice-text {
	flex: 1;
}

/* ── Feedback Overlay ────────────────────────────────────── */
.gfd-feedback-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.gfd-feedback-message {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gfd-text);
	text-align: center;
	padding: 24px 48px;
	background: rgba(26, 26, 46, 0.95);
	border-radius: var(--gfd-radius-lg);
	backdrop-filter: blur(8px);
	font-family: var(--gfd-font-family);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.gfd-feedback-icon {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gfd-feedback-text {
	font-size: calc(1.3rem * var(--gfd-font-scale, 1));
}

/* ── Calculating Screen ──────────────────────────────────── */
.gfd-calculating-wrapper {
	text-align: center;
	width: 100%;
}

.gfd-calculating-icon {
	font-size: 3rem;
	margin-bottom: 16px;
}

.gfd-calculating-text {
	font-size: calc(1.4rem * var(--gfd-font-scale, 1));
	font-weight: 600;
	color: var(--gfd-text);
	font-family: var(--gfd-font-family);
}

/* ── Result Card ─────────────────────────────────────────── */
.gfd-result-card {
	max-width: 600px;
	width: 100%;
	background: var(--gfd-bg-card);
	border-radius: var(--gfd-radius-lg);
	padding: 48px 40px;
	text-align: center;
	border: 2px solid var(--gfd-border);
	border-top: 4px solid var(--gfd-primary);
	font-family: var(--gfd-font-family);
}

.gfd-result-greeting {
	font-size: calc(1rem * var(--gfd-font-scale, 1));
	color: var(--gfd-text-muted);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gfd-result-emoji {
	font-size: 4rem;
	margin-bottom: 16px;
	line-height: 1;
}

.gfd-result-title {
	font-size: calc(2rem * var(--gfd-font-scale, 1));
	font-weight: 800;
	margin-bottom: 8px;
}

.gfd-result-description {
	font-size: calc(1.15rem * var(--gfd-font-scale, 1));
	color: var(--gfd-text-muted);
	line-height: 1.6;
	margin-bottom: 32px;
}

.gfd-result-communication {
	padding: 16px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--gfd-radius);
	margin-bottom: 24px;
}

.gfd-result-comm-label {
	color: var(--gfd-text-muted);
	font-size: calc(0.9rem * var(--gfd-font-scale, 1));
}

.gfd-result-comm-value {
	color: var(--gfd-text);
	font-weight: 600;
	font-size: calc(1rem * var(--gfd-font-scale, 1));
}

.gfd-result-strengths,
.gfd-result-tips {
	text-align: left;
	margin-bottom: 24px;
}

.gfd-result-strengths h3,
.gfd-result-tips h3 {
	font-size: calc(1rem * var(--gfd-font-scale, 1));
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--gfd-text-muted);
	margin-bottom: 12px;
}

.gfd-result-strengths ul,
.gfd-result-tips ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gfd-result-strengths li,
.gfd-result-tips li {
	padding: 8px 0;
	border-bottom: 1px solid var(--gfd-border);
	color: var(--gfd-text);
	font-size: calc(1.15rem * var(--gfd-font-scale, 1));
	line-height: 1.5;
}

.gfd-result-strengths li:last-child,
.gfd-result-tips li:last-child {
	border-bottom: none;
}

/* ── Done Button (Result Card) ───────────────────────────── */
.gfd-done-btn {
	display: inline-block;
	margin-top: 32px;
	padding: 14px 48px !important;
	--gf-local-bg-color: var(--gfd-btn-color, var(--gfd-primary));
	background: var(--gfd-btn-color, var(--gfd-primary)) !important;
	background-color: var(--gfd-btn-color, var(--gfd-primary)) !important;
	color: var(--gfd-btn-text, #fff) !important;
	font-size: calc(1rem * var(--gfd-font-scale, 1));
	font-weight: 700;
	font-family: var(--gfd-font-family);
	border: none !important;
	border-radius: var(--gfd-radius) !important;
	cursor: pointer;
	transition: transform var(--gfd-transition), box-shadow var(--gfd-transition);
	line-height: 1;
}

.gfd-done-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.gfd-done-btn:active {
	transform: translateY(0);
}

/* ── Share Section ───────────────────────────────────────── */
.gfd-share-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--gfd-border);
}

.gfd-share-section h3 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--gfd-text-muted);
	margin-bottom: 16px;
	font-family: var(--gfd-font-family);
}

.gfd-share-buttons {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.gfd-share-btn {
	padding: 10px 20px;
	border: 1px solid var(--gfd-border);
	border-radius: var(--gfd-radius);
	background: rgba(255, 255, 255, 0.05);
	color: var(--gfd-text);
	font-size: 0.85rem;
	font-family: var(--gfd-font-family);
	cursor: pointer;
	transition: all var(--gfd-transition);
}

.gfd-share-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--gfd-primary);
}

.gfd-share-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.gfd-share-email {
	border-color: var(--gfd-primary);
	background: rgba(108, 99, 255, 0.1);
}

/* ── See How Others Scored ──────────────────────────────── */
.gfd-others-results {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--gfd-border);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.gfd-others-results.gfd-others-visible {
	opacity: 1;
	transform: translateY(0);
}

.gfd-others-header h3 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--gfd-text-muted);
	margin-bottom: 4px;
	font-family: var(--gfd-font-family);
}

.gfd-others-total {
	font-size: 0.85rem;
	color: var(--gfd-text-muted);
	margin-bottom: 16px;
}

.gfd-others-bars {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gfd-others-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gfd-others-bar-row.gfd-others-bar-you {
	font-weight: 600;
}

.gfd-others-bar-label {
	width: 140px;
	flex-shrink: 0;
	font-size: 0.85rem;
	color: var(--gfd-text);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gfd-others-bar-badge {
	display: inline-block;
	font-size: 0.65rem;
	background: var(--gfd-primary);
	color: #fff;
	padding: 1px 6px;
	border-radius: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	vertical-align: middle;
}

.gfd-others-bar-track {
	flex: 1;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
}

.gfd-others-bar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gfd-others-bar-pct {
	width: 40px;
	flex-shrink: 0;
	font-size: 0.8rem;
	color: var(--gfd-text-muted);
	text-align: right;
}

/* ── Milestone Badge ─────────────────────────────────────── */
.gfd-milestone-badge {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	background: rgba(26, 26, 46, 0.95);
	border-radius: var(--gfd-radius-lg);
	backdrop-filter: blur(8px);
	pointer-events: none;
	font-family: var(--gfd-font-family);
}

.gfd-milestone-icon {
	font-size: 2rem;
}

.gfd-milestone-text {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--gfd-text);
}

/* ── End Capture (post-quiz fields) ──────────────────────── */
.gfd-end-capture {
	text-align: center;
}

.gfd-end-capture-heading {
	font-size: calc(1.4rem * var(--gfd-font-scale, 1));
	font-weight: 600;
	color: var(--gfd-text);
	margin-bottom: 24px;
	font-family: var(--gfd-font-family);
}

.gfd-capture-fields-wrap {
	max-width: calc(440px * var(--gfd-font-scale, 1));
	margin: 0 auto;
	text-align: left;
}

.gfd-capture-submit {
	margin-top: 24px;
}

/* Override GF field styles when inside the overlay. */
.gfd-end-capture-field {
	display: block !important;
	margin-bottom: 16px;
	background: none;
}

.gfd-end-capture-field .gfield_label {
	display: block;
	font-size: calc(0.85rem * var(--gfd-font-scale, 1));
	color: var(--gfd-text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: var(--gfd-font-family);
	font-weight: 600;
}

.gfd-end-capture-field .gfield_required,
.gfd-end-capture-field .gfield_required_text {
	color: var(--gfd-accent);
}

.gfd-end-capture-field .ginput_container input,
.gfd-end-capture-field .ginput_container textarea,
.gfd-end-capture-field .ginput_container select {
	width: 100%;
	padding: 14px 18px;
	background: var(--gfd-bg-card);
	border: 2px solid var(--gfd-border);
	border-radius: var(--gfd-radius);
	color: var(--gfd-text);
	font-size: calc(1rem * var(--gfd-font-scale, 1));
	font-family: var(--gfd-font-family);
	outline: none;
	transition: border-color var(--gfd-transition);
	box-sizing: border-box;
}

.gfd-end-capture-field .ginput_container input:focus,
.gfd-end-capture-field .ginput_container textarea:focus,
.gfd-end-capture-field .ginput_container select:focus {
	border-color: var(--gfd-primary);
}

.gfd-end-capture-field .ginput_container input::placeholder,
.gfd-end-capture-field .ginput_container textarea::placeholder {
	color: var(--gfd-text-muted);
}

.gfd-end-capture-field .gfield_description {
	font-size: 0.85rem;
	color: var(--gfd-text-muted);
	margin-top: 6px;
}

.gfd-end-capture-field .gfield_validation_message {
	display: none;
}

/* ── Validation Error ────────────────────────────────────── */
.gfd-error {
	border-color: var(--gfd-accent) !important;
	box-shadow: 0 0 0 3px rgba(255, 101, 132, 0.2);
}

/* ── Confetti Container ──────────────────────────────────── */
.gfd-confetti-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1000004;
	overflow: hidden;
}

/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
	.gfd-fullscreen-overlay {
		padding: 16px;
	}

	.gfd-welcome-text {
		font-size: 1.4rem;
	}

	.gfd-question-text {
		font-size: 1.3rem;
		margin-bottom: 24px;
	}

	.gfd-choice {
		padding: 14px 16px;
		font-size: 0.95rem;
		gap: 12px;
	}

	.gfd-choice-letter {
		width: 32px;
		height: 32px;
		font-size: 0.8rem;
	}

	.gfd-result-card {
		padding: 32px 24px;
	}

	.gfd-result-title {
		font-size: calc(1.6rem * var(--gfd-font-scale, 1));
	}

	.gfd-result-emoji {
		font-size: 3rem;
	}

	.gfd-result-description {
		font-size: calc(1rem * var(--gfd-font-scale, 1));
	}

	.gfd-feedback-message {
		padding: 20px 32px;
		font-size: calc(1.2rem * var(--gfd-font-scale, 1));
	}

	.gfd-feedback-text {
		font-size: calc(1.1rem * var(--gfd-font-scale, 1));
	}

	.gfd-close-btn {
		top: 10px;
		left: 10px;
	}

	.gfd-progress-text {
		top: 10px;
		right: 10px;
	}

	.gfd-share-buttons {
		flex-direction: column;
	}

	.gfd-start-btn {
		padding: 14px 36px;
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {
	.gfd-question-text {
		font-size: calc(1.15rem * var(--gfd-font-scale, 1));
	}

	.gfd-choice {
		padding: 12px 14px;
		font-size: calc(0.9rem * var(--gfd-font-scale, 1));
	}

	.gfd-result-card {
		padding: 24px 16px;
	}

	.gfd-result-title {
		font-size: calc(1.4rem * var(--gfd-font-scale, 1));
	}
}

/* ── Print Styles ────────────────────────────────────────── */
@media print {
	body.gfd-noscroll {
		overflow: visible;
	}

	.gfd-fullscreen-overlay {
		position: static;
		background: #fff;
		color: #000;
		padding: 0;
		overflow: visible;
	}

	.gfd-progress-container,
	.gfd-progress-text,
	.gfd-close-btn,
	.gfd-share-buttons,
	.gfd-confetti-container,
	.gfd-feedback-overlay,
	.gfd-milestone-badge {
		display: none !important;
	}

	.gfd-result-card {
		background: #fff;
		color: #000;
		border: 2px solid #ccc;
		box-shadow: none;
		max-width: 100%;
		padding: 32px;
		page-break-inside: avoid;
	}

	.gfd-result-greeting {
		color: #555;
	}

	.gfd-result-title {
		color: #000 !important;
	}

	.gfd-result-description {
		color: #333;
	}

	.gfd-result-communication {
		background: #f5f5f5;
	}

	.gfd-result-comm-label {
		color: #555;
	}

	.gfd-result-comm-value {
		color: #000;
	}

	.gfd-result-strengths h3,
	.gfd-result-tips h3 {
		color: #555;
	}

	.gfd-result-strengths li,
	.gfd-result-tips li {
		color: #000;
		border-bottom-color: #ddd;
	}

	.gfd-share-section {
		display: none !important;
	}
}