/*
 * Beri UMI Kviz: the quiz card. The values are the ones of the quiz the site had before (measured on
 * the old page); the accent colour follows the Elementor Kit through a CSS variable, with a literal
 * fallback. Everything is scoped to the form Contact Form 7 prints (form.bu-kviz).
 *
 * Selectors start with ".wpcf7 form.bu-kviz" where they have to beat the site's button style
 * (Elementor -> Site Settings -> Buttons reaches every submit button).
 */
.wpcf7 form.bu-kviz { --bu-kviz-ink: #2c3e50; --bu-kviz-accent: var(--e-global-color-buyellowband, #FFDF50); max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f9f9f9; box-sizing: border-box; text-align: left; }
.wpcf7 form.bu-kviz * { box-sizing: border-box; }

/* heading of the card: plain HTML in the form template */
.bu-kviz__header { text-align: center; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 15px; }
.bu-kviz .bu-kviz__title { font-size: 24px; line-height: 1.3; margin: 0 0 5px; }
.bu-kviz__intro { margin: 0; color: var(--bu-kviz-ink); font-size: 16px; }

/* a question */
.bu-kviz__question { margin: 0 0 20px; padding: 15px; border: 0; min-width: 0; background: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.bu-kviz__legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 700; color: var(--bu-kviz-ink); }
.bu-kviz .wpcf7-form-control-wrap, .bu-kviz .bu-kviz__options { display: block; clear: both; }
.bu-kviz .bu-kviz__option { display: block; clear: both; padding: 8px 10px; margin: 5px 0; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 20px; color: #333; transition: background .2s; }
.bu-kviz__option:hover { background: #f0f7ff; }
.bu-kviz__question.is-correct .bu-kviz__legend { color: #27ae60; }
.bu-kviz__question.is-incorrect .bu-kviz__legend { color: #e74c3c; }
.bu-kviz .wpcf7-not-valid-tip { padding: 0 10px; font-size: 14px; }

/* the two buttons: Contact Form 7's submit and "again" */
.wpcf7 form.bu-kviz .bu-kviz__button { display: block; width: 100%; margin-top: 10px; padding: 20px; border: 0; border-radius: 40px; background: var(--bu-kviz-accent); background-image: none; box-shadow: none; color: #000; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.2; text-align: center; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background .2s, color .2s; }
.wpcf7 form.bu-kviz .bu-kviz__button:hover, .wpcf7 form.bu-kviz .bu-kviz__button:focus-visible { background: #000; color: #fff; }
.wpcf7 form.bu-kviz .bu-kviz__button[hidden] { display: none; }
.wpcf7 form.bu-kviz .wpcf7-spinner { display: none; }   /* marking takes no time worth a spinner */

/* the result */
.bu-kviz__result { text-align: center; padding: 20px; margin-top: 20px; background: #fff; border-radius: 5px; }
.bu-kviz .bu-kviz__result-title { margin: 0; font-size: 18px; }
.bu-kviz__score { font-size: 2.5em; font-weight: 700; color: var(--bu-kviz-ink); margin: 10px 0; line-height: 1.2; }
.bu-kviz__verdict { margin: 0 0 10px; }

/* With the script running, the result block above replaces Contact Form 7's message box (the same
   text still reaches screen readers through its own status region). Without the script the box is
   the result. */
.wpcf7 form.bu-kviz.bu-kviz--js .wpcf7-response-output { display: none; }
.wpcf7 form.bu-kviz .wpcf7-response-output { margin: 20px 0 0; padding: 14px 16px; border-radius: 5px; background: #fff; border-color: #ddd; text-align: center; }