/*
 * MQuiz front-end styles — matches the original marpoint.gr/quiz design.
 * Every selector is prefixed with ".mquiz-app" (two classes) so Elementor kit rules
 * such as ".elementor-kit-XXXX h2 { color:#fff }" and theme/reset button styles cannot override it.
 */

/* Page background on the quiz's own page (/mquiz/slug/) */
body.mquiz-page,
body.mquiz-page.elementor-default,
body.mquiz-page[class*="elementor-kit-"] { background-color: #f4f7f6; }

/* The original quiz page has no page title — hide the theme's title on quiz pages */
body.mquiz-page .page-header,
body.mquiz-page .entry-header { display: none; }

.mquiz-app {
	--mq-primary: #001551;
	--mq-secondary: #29A3CE;
	--mq-success: #2ecc71;
	--mq-warning: #f1c40f;
	--mq-danger: #e74c3c;
	--mq-bg: #f4f7f6;
	--mq-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	font-family: var(--mq-font);
	color: #333;
	line-height: 1.6;
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	padding: 0 15px;
}
.mquiz-app *, .mquiz-app *::before, .mquiz-app *::after { box-sizing: border-box; }
.mquiz-app [hidden] { display: none !important; }

/* Reset typography inherited from Elementor kit / theme */
.mquiz-app h2, .mquiz-app h3, .mquiz-app p, .mquiz-app label, .mquiz-app button, .mquiz-app input, .mquiz-app textarea, .mquiz-app a, .mquiz-app span, .mquiz-app strong, .mquiz-app em {
	font-family: var(--mq-font);
	letter-spacing: normal;
	text-transform: none;
}
.mquiz-app p { margin: 0 0 1em; color: #333; font-size: 1rem; line-height: 1.6; }

/* Card */
.mquiz-app .mquiz-card {
	max-width: 650px;
	margin: 40px auto;
	background: #fff;
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
}

/* Progress */
.mquiz-app .mquiz-progress { width: 100%; background: #eee; height: 12px; border-radius: 10px; margin-bottom: 30px; overflow: hidden; }
.mquiz-app .mquiz-progress span { display: block; width: 0; height: 100%; background: var(--mq-primary); transition: width .4s ease; }

/* Section label + question */
.mquiz-app .mquiz-section {
	font-size: .8rem; font-weight: bold; color: #888;
	text-transform: uppercase; letter-spacing: 1px;
	margin: 0; line-height: 1.6;
}
.mquiz-app h2, .mquiz-app h3,
.mquiz-app .mquiz-question,
.mquiz-app .mquiz-results-title {
	margin-top: 0;
	color: var(--mq-primary);
	font-weight: bold;
	line-height: 1.2;
	background: none;
}
.mquiz-app .mquiz-question { font-size: 1.5em; margin: .83em 0; margin-top: 0; }
.mquiz-app .mquiz-results-title { font-size: 1.5em; margin: 0 0 .5em; }
.mquiz-app h3 { font-size: 1.17em; margin: 1em 0 .5em; }

/* Answer options */
.mquiz-app .mquiz-answers { display: block; }
.mquiz-app .mquiz-answer,
.mquiz-app button.mquiz-answer {
	display: block; width: 100%;
	padding: 15px; margin: 10px 0;
	border: 2px solid #eee; border-radius: 8px;
	background: #fff; color: #333;
	text-align: left; cursor: pointer;
	transition: .2s;
	font-size: 1rem; font-weight: 400; line-height: 1.4;
	box-shadow: none; min-height: 0; height: auto; white-space: normal;
}
.mquiz-app .mquiz-answer:hover,
.mquiz-app .mquiz-answer:focus,
.mquiz-app .mquiz-answer:focus-visible {
	border-color: var(--mq-primary);
	background: #f0f7ff;
	color: #333;
	outline: none;
}
.mquiz-app .mquiz-answer.is-selected,
.mquiz-app .mquiz-answer.is-selected:hover { border-color: var(--mq-primary); background: #f0f7ff; color: #333; }
.mquiz-app .mquiz-answer:disabled { cursor: default; opacity: 1; }

/* Why this matters */
.mquiz-app .mquiz-desc {
	font-style: italic; color: #666; font-size: .9rem;
	margin: 15px 0 0; padding-top: 10px;
	border-top: 1px solid #eee;
}
.mquiz-app .mquiz-desc strong { color: #666; font-weight: bold; }
.mquiz-app .mquiz-desc em { font-style: italic; color: #666; }

/* Back / counter */
.mquiz-app .mquiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: .85rem; color: #888; }
.mquiz-app .mquiz-back,
.mquiz-app button.mquiz-back {
	background: none; border: 0; padding: 0; margin: 0;
	color: var(--mq-primary); font-size: .9rem; cursor: pointer; box-shadow: none;
}
.mquiz-app .mquiz-back:hover, .mquiz-app .mquiz-back:focus { background: none; color: var(--mq-primary); text-decoration: underline; }
.mquiz-app .mquiz-count { margin-left: auto; }

/* Results */
.mquiz-app .mquiz-score { margin: 0; font-size: 1rem; color: #333; }
.mquiz-app .mquiz-score strong { color: #333; }
.mquiz-app .mquiz-tier { padding: 20px; border-radius: 8px; margin-top: 20px; border-left: 5px solid var(--mq-primary); background: #f0f7ff; }
.mquiz-app .mquiz-tier.mquiz-tone-danger  { background: #fee;    border-color: var(--mq-danger); }
.mquiz-app .mquiz-tier.mquiz-tone-warning { background: #fffde7; border-color: var(--mq-warning); }
.mquiz-app .mquiz-tier.mquiz-tone-success { background: #eafaf1; border-color: var(--mq-success); }
.mquiz-app .mquiz-tier .mquiz-tier-title { margin: 0 0 10px; color: #333; font-size: 1.17em; }
.mquiz-app .mquiz-tier-text { margin: 0 0 10px; }
.mquiz-app .mquiz-tier-hl { margin: 0; }
.mquiz-app .mquiz-tier-hl strong { font-weight: bold; color: #333; }

/* Lead form */
.mquiz-app .mquiz-form {
	margin-top: 30px; padding: 20px;
	border-top: 2px solid #eee; background: #fafafa;
	border-radius: 0 0 12px 12px;
}
.mquiz-app .mquiz-form h3 { margin-top: 0; }
.mquiz-app .mquiz-form-text { color: #333; }
.mquiz-app .mquiz-fields { display: block; }
.mquiz-app .mquiz-field label { display: block; margin: 8px 0 0; font-size: .9rem; font-weight: 600; color: #333; }
.mquiz-app .mquiz-field input,
.mquiz-app .mquiz-field textarea {
	width: 100%; padding: 12px; margin: 8px 0;
	border: 1px solid #ccc; border-radius: 6px;
	background: #fff; color: #333;
	font-size: 1rem; line-height: 1.4; box-shadow: none; height: auto;
}
.mquiz-app .mquiz-field input:focus,
.mquiz-app .mquiz-field textarea:focus { border-color: var(--mq-primary); outline: none; box-shadow: none; }
.mquiz-app .is-invalid,
.mquiz-app .mquiz-field .is-invalid { border-color: var(--mq-danger); }

.mquiz-app .mquiz-consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: .85rem; font-weight: 400; color: #666; cursor: pointer; }
.mquiz-app .mquiz-consent input { margin: 4px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--mq-primary); }
.mquiz-app .mquiz-consent input.is-invalid { outline: 2px solid var(--mq-danger); outline-offset: 1px; }
.mquiz-app .mquiz-consent span { color: #666; }
.mquiz-app .mquiz-consent a { color: var(--mq-secondary); text-decoration: underline; }

.mquiz-app .mquiz-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.mquiz-app .mquiz-error { margin: 15px 0 0; padding: 10px 12px; border-radius: 6px; background: #fee; color: #c0392b; font-size: .9rem; }

.mquiz-app .mquiz-submit,
.mquiz-app button.mquiz-submit {
	display: block;
	background-color: var(--mq-primary); color: #fff;
	border: none; padding: 15px; margin: 15px 0 0;
	width: 100%; border-radius: 6px;
	cursor: pointer; font-weight: bold; font-size: 1rem; line-height: 1.4; box-shadow: none;
}
.mquiz-app .mquiz-submit:hover, .mquiz-app .mquiz-submit:focus { background-color: var(--mq-primary); color: #fff; opacity: .9; }
.mquiz-app .mquiz-submit:disabled { opacity: .6; cursor: wait; }

.mquiz-app .mquiz-success { text-align: center; padding: 30px; border-radius: 12px; margin-top: 20px; background: #eafaf1; color: #27ae60; font-weight: 600; }

/* CTA */
.mquiz-app .mquiz-cta { text-align: center; margin-top: 40px; padding: 20px; border: 1px dashed var(--mq-secondary); border-radius: 12px; background: none; }
.mquiz-app .mquiz-cta h3 { margin: 0 0 10px; color: var(--mq-primary); }
.mquiz-app .mquiz-cta p { margin: 0; color: #333; }
.mquiz-app .mquiz-cta-btn,
.mquiz-app a.mquiz-cta-btn {
	display: inline-block;
	background-color: var(--mq-secondary); color: #fff;
	padding: 15px 30px; border-radius: 50px; border: 0;
	text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.4;
	margin-top: 15px;
}
.mquiz-app .mquiz-cta-btn:hover, .mquiz-app .mquiz-cta-btn:focus, .mquiz-app a.mquiz-cta-btn:visited { color: #fff; background-color: var(--mq-secondary); opacity: .9; text-decoration: none; }

@media (max-width: 600px) {
	.mquiz-app .mquiz-card { padding: 20px; margin: 20px auto; }
}