/* Minimal site styling for the demo (you can replace with your own design system) */
:root{
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #e7e9f3;
  --muted: #aab1cc;
  --accent: #7aa2ff;
  --ring: rgba(122,162,255,.6);
  --radius: 18px;
  --shadow: 0 20px 50px rgba(10,15,40,.35);
}

.card{
  overflow: hidden;
}

#quiz-embed{
  display: block;
}
h2.TextWrapper-sc-__sc-1f8vz90-0.iBQLyL{
  font-size: 32px;
  line-height: 1.2;
  color: var(--ring);
  margin-bottom: 16px;
}
.btn:focus{ outline: 2px solid var(--ring); outline-offset: 2px; }
.hint{ color: var(--muted); font-size: 14px; }

.tips{ margin: 28px 0 80px; color: var(--muted); }
.tips h3{ color: var(--ink); }
.quiz-box.quiz-grey-box{
  background-color: #d9d9d9;
  border: 4px solid;
  border-color: #ffd452 !important;
  border-radius: 0.6em 0.6em 0.6em 0.6em;
}
.quiz-box.quiz-white-box{
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.quiz-content{
  z-index: 1;
}
.tf-quiz-img{
  margin: 0 auto;
  width: 60%;
}
.back-btn{
  font-family: 'Rubik', sans-serif;
  text-decoration: none;
  color: #3029D7;
}
.back-btn:hover{
  text-decoration: none;
  color: #ffd452;
}
/* Ensure overlays always float above the Typeform iframe */
  .overlay {
    /* Use fixed so overlay sits above iframe regardless of ancestor stacking contexts */
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    background:rgba(0,0,0,0.75);
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    transition:opacity .4s ease, visibility .4s;
    z-index:2147483647 !important; /* very high to win over any iframe stacking */
    pointer-events: none; /* disabled until visible to avoid accidental hits */
  }
  .overlay.show {
    visibility:visible;
    opacity:1;
    pointer-events: auto; /* allow clicks when visible */
  }
  .box {
    background:#fff;
    color:#111;
    padding:40px 50px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
    max-width:420px;
    position:relative;
  }
  .close-btn {
    position:absolute;
    top:10px;
    right:10px;
    background:transparent;
    border:none;
    font-size:26px;
    cursor:pointer;
  }
  .share { margin-top:20px; display:flex; gap:16px; justify-content:center; }
  .share a { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
  .facebook{background:#1877F2;} .twitter{background:#1DA1F2;} .linkedin{background:#0077B5;}


@media screen and (max-width: 767px) {
  #quiz-embed{
    height: 750px !important;
  }
  .tf-quiz-img{
    margin: 0 auto;
    width: 100%;
  }
}