/**
 * Styling for the small set of quiz-flow elements that are the site's own
 * Elementor markup (see assets/js/quiz.js for the full class list) but are
 * reused identically across every game's page — kept here, enqueued once
 * per [fday_quiz] shortcode, rather than set per-element in Elementor's
 * style panel on every page separately.
 */

/* Both default to a non-breaking space in the Elementor markup, so they'd
   otherwise show as an empty styled box — quiz.js reveals them (inline
   style, overriding this) only once real text is actually set. */
.alert-message,
.quiz-message {
	display: none;
	background: rgb(255 255 255 / 60%);
	padding: 5px 10px !important;
	border-radius: 10px;
}

/* [fday_quiz_birth_year] — match the Elementor atomic form inputs
   (.input-field: 250px wide, 36px high, 5px radius, 14px text). */
select.birth-year-field {
	box-sizing: border-box;
	display: block;
	width: 250px;
	max-width: 100%;
	height: 36px;
	margin: 0 auto 10px;
	padding: 0 30px 0 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #0c0d0e;
	background-color: #fff;
	border: 1px solid #d6d5d5;
	border-radius: 5px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239DA5AE' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

select.birth-year-field:focus {
	border-color: #706f6f;
	outline: none;
}

/* Placeholder look until a year is picked (first option has an empty value). */
select.birth-year-field:invalid {
	color: #9da5ae;
}

select.birth-year-field option {
	color: #0c0d0e;
}