/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

.hide {display:none !important;}

/*
#rive-canvas {
  width: 100%;
  height: 400px;
  display: block;
}
*/

.video-border {
    border-radius: 45px;
    z-index:1;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    .fusion-fullwidth.fusion-builder-row-3.fusion-sticky-transition {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
                    0 6px 6px rgba(0, 0, 0, 0.23);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .disable-fullheight-tablet {
    height: auto !important;
    min-height: unset !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-fullwidth-img,
  .tablet-fullwidth-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ========== */
/* Quiz Maker */
/* ========== */
/*
IMPORTANT:
In EACH quiz settings, set:
Custom class for quiz container = universal-quiz

Then the quiz wrapper will include: class="... universal-quiz ..."
and the CSS below will apply universally (all quizzes, EN + FR).
*/

/* Answer hover label color (kept from your old intent, now universal) */
.universal-quiz.ays-quiz-container.ays_quiz_classic_light
.ays-questions-container
.ays-field:hover label[for^='ays-answer-'] {
    color: #000 !important;
}

/* Radio/checkbox bullet styling (already universal, kept) */
.universal-quiz .ays-field.ays_list_view_item input~label:before {
    background: #000;
    border: 3px solid #000;
    background-clip: content-box;
}

.universal-quiz .ays-field.ays_list_view_item input~label:hover:before {
    background: #000;
    color: #000;
    background-clip: content-box;
}

/* Finish / results screen: label weight (universal) */
.universal-quiz [id^="ays_finish_quiz_"] .ays-field input~label[for^='ays-answer-'] {
    font-weight: normal;
}

/* Question typography (kept) */
.universal-quiz .ays_quiz_question p {
    font-size: 22px !important;
    font-weight: 400 !important;
}

/*
Buttons:
Your issue was the plugin generating ID-specific rules like:
#ays-quiz-container-8 input[type='button'] { color: ... !important; }
So we override using the ID prefix + your custom class (still universal).
*/

/* Base button reset (inside quizzes only) */
div[id^="ays-quiz-container-"].universal-quiz input[type="button"],
div[id^="ays-quiz-container-"].universal-quiz input[type="submit"],
div[id^="ays-quiz-container-"].universal-quiz button,
div[id^="ays-quiz-container-"].universal-quiz .action-button {
    outline: none !important;
    box-shadow: none !important;
}

/* Hover/Focus styling for Next/Prev/Start/Finish buttons (INPUT buttons included) */
div[id^="ays-quiz-container-"].universal-quiz input[type="button"]:hover,
div[id^="ays-quiz-container-"].universal-quiz input[type="button"]:focus,
div[id^="ays-quiz-container-"].universal-quiz input[type="submit"]:hover,
div[id^="ays-quiz-container-"].universal-quiz input[type="submit"]:focus,
div[id^="ays-quiz-container-"].universal-quiz button:hover,
div[id^="ays-quiz-container-"].universal-quiz button:focus,
div[id^="ays-quiz-container-"].universal-quiz .action-button:hover,
div[id^="ays-quiz-container-"].universal-quiz .action-button:focus,

/* Your category-selective buttons (kept, but scoped) */
div[id^="ays-quiz-container-"].universal-quiz + .ays-quiz-category-selective-main-container
.ays-quiz-category-selective-restart-bttn:hover,
div[id^="ays-quiz-container-"].universal-quiz .ays-quiz-category-selective-submit-bttn:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background-color: #000 !important;
    color: #fff !important;
}

/* Checked answer bullet (universal) */
.universal-quiz [id^="ays_finish_quiz_"] .ays-field input:checked+label:before {
    border-color: #000000 !important;
    background: #000000 !important;
    background-clip: content-box !important;
}

/* Hover field + label color (kept, universal) */
.universal-quiz .ays-field:hover,
.universal-quiz .ays-field:hover label {
    color: #000000 !important;
}

/* Uppercase buttons (kept, universal) */
.universal-quiz .action-button {
    text-transform: uppercase !important;
}

/* Quiz title font (kept) */
.universal-quiz .ays-fs-title {
    font-family: 'Bubblegum Sans', cursive !important;
}

/* Other site styles */
.fusion-popover {color: var(--awb-color8);text-decoration: underline;}

/* =========================================================
   AYS Quiz Maker - FORCE override inline quiz <style> blocks
   Requires: each quiz container has class "universal-quiz"
   ========================================================= */

/* 1) Override plugin hover/focus for ALL quizzes (matches their structure, without the number) */
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
form[id^="ays_finish_quiz_"]
.action-button:hover,
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
form[id^="ays_finish_quiz_"]
.action-button:focus {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

/* 2) Your buttons are <input type="button" ... class="action-button"> so force those too */
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
input[type="button"].action-button:hover,
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
input[type="button"].action-button:focus,
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
input[type="submit"].action-button:hover,
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
input[type="submit"].action-button:focus {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

/* 3) The plugin also styles arrow <i> tags with .action-button. Force those too */
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
i.action-button:hover,
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
i.action-button:focus {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: #000 !important;
  color: #fff !important;
}

/* 4) Kill their "always black text" rule on inputs by setting base state too (optional) */
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
input[type="button"].action-button,
.ays-quiz-container.universal-quiz[id^="ays-quiz-container-"]
input[type="submit"].action-button {
  color: #000 !important; /* default text */
}