/* Fluentare landing exercise cards 0.1.13
   Five-exercise landing sequence with blue-gray cards and integrated title caps.
*/
body.fluentare-landing-exercise-cards{
  --flec-shell:#edf2f5;--flec-shell-2:#e8eef2;--flec-cap:#1f3f63;--flec-cap-2:#173553;
  --flec-border:#9fb3c0;--flec-title:#ffffff;--flec-inner:#fbfdfe;--flec-inner-border:#dce5ea;
  --flec-shadow:0 4px 14px rgba(0,0,0,.06);--flec-radius:14px;
}

/* Shared cards ----------------------------------------------------------- */
body.fluentare-landing-exercise-cards .sfft-root,
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified,
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified.sfso-card-bg-blue,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container,
body.fluentare-landing-exercise-cards .flec-blink-group,
body.fluentare-landing-exercise-cards .flec-listen-group{
  box-sizing:border-box;width:100%;max-width:100%;overflow:visible;position:relative;
  border:1px solid var(--flec-border)!important;border-radius:var(--flec-radius)!important;
  background:linear-gradient(145deg,var(--flec-shell) 0%,var(--flec-shell-2) 100%)!important;
  box-shadow:var(--flec-shadow)!important;
}
body.fluentare-landing-exercise-cards .sfft-block,
body.fluentare-landing-exercise-cards .wp-block-sf-sentence-order,
body.fluentare-landing-exercise-cards .bf-quiz,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container,
body.fluentare-landing-exercise-cards .flec-blink-group,
body.fluentare-landing-exercise-cards .flec-listen-group{margin-top:0!important;margin-bottom:0!important;}

/* Sequence metadata ------------------------------------------------------ */
body.fluentare-landing-exercise-cards .flec-sequence-label{
  box-sizing:border-box;width:100%;margin:97.2px 0 10px;text-align:center;color:#4c6877;
  font-size:23px;line-height:1.2;font-weight:800;letter-spacing:.055em;
}
body.fluentare-landing-exercise-cards .flec-sequence-label.flec-sequence-1{margin-top:0;}
body.fluentare-landing-exercise-cards .flec-sequence-marker{position:relative;display:inline-block;padding:0 .15em;isolation:isolate;}
body.fluentare-landing-exercise-cards .flec-sequence-marker::before{
  content:"";position:absolute;z-index:-1;left:-.14em;right:-.14em;bottom:.02em;height:.62em;
  border-radius:3px 7px 4px 6px;background:rgba(112,185,218,.38);transform:rotate(-.5deg);
}

/* Option 1: integrated header cap --------------------------------------- */
body.fluentare-landing-exercise-cards .flec-exercise-title{
  box-sizing:border-box;margin:0!important;padding:12px 12px 10px!important;text-align:center!important;
  color:var(--flec-title)!important;font-size:17px!important;text-shadow:0 1px 1px rgba(0,0,0,.16)!important;line-height:1.2!important;font-weight:800!important;
  letter-spacing:.008em!important;text-transform:none!important;
  background:linear-gradient(180deg,var(--flec-cap) 0%,var(--flec-cap-2) 100%)!important;
  border-bottom:1px solid rgba(134,157,171,.52)!important;
  border-radius:13px 13px 0 0!important;
}
body.fluentare-landing-exercise-cards .sfft-root>.flec-exercise-title,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container>.flec-exercise-title,
body.fluentare-landing-exercise-cards .flec-blink-group>.flec-exercise-title,
body.fluentare-landing-exercise-cards .flec-listen-group>.flec-exercise-title{
  margin-left:-10px!important;margin-right:-10px!important;width:calc(100% + 20px)!important;
}


/* Consistent breathing room under the dark header cap. */
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container>.flec-exercise-title,
body.fluentare-landing-exercise-cards .flec-listen-group>.flec-exercise-title,
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified>.flec-exercise-title{
  margin-bottom:14px!important;
}
/* Quiz: deliberately more room between the header cap and first question. */
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container>.flec-exercise-title{
  margin-bottom:26px!important;
}


/* Sentence Order: "Basta clicar!" is precisely centered below "Monte a frase".
   Three balanced grid columns reserve a separate right-hand position for 1/5,
   while reducing the vertical distance from the cap to the helper text. */
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified>.flec-exercise-title{
  margin-bottom:0!important;
}
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified .sfso-heading-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:6px!important;
  padding:5px 12px 14px!important;
  margin:0!important;
}
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified .sfso-title{
  grid-column:2!important;
  justify-self:center!important;
  min-width:0!important;
  text-align:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
}
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified .sfso-progress{
  grid-column:3!important;
  justify-self:end!important;
  text-align:right!important;
  margin:0!important;
}

/* QUICK TRANSLATION ------------------------------------------------------ */
body.fluentare-landing-exercise-cards .sfft-root{padding:0 10px 10px!important;}
body.fluentare-landing-exercise-cards .sfft-stage{padding-top:13px!important;}
body.fluentare-landing-exercise-cards .sfft-cue{box-sizing:border-box;margin-left:45px!important;margin-right:0!important;}
body.fluentare-landing-exercise-cards .sfft-input-wrap{border-color:#c6d1d8!important;border-radius:8px!important;background:#fff!important;}
body.fluentare-landing-exercise-cards .sfft-root:not(.sfft-activated) .sfft-answer-row{grid-template-columns:0 minmax(0,584px) 0!important;column-gap:0!important;}
body.fluentare-landing-exercise-cards .sfft-root:not(.sfft-activated) .sfft-answer-tools{display:none!important;}
body.fluentare-landing-exercise-cards .sfft-root:not(.sfft-activated) .sfft-cue{margin-left:0!important;margin-right:0!important;}
/* The source Quick Translation JS never sets sfft-activated. The landing script
   now sets it upon real learner input; do not collapse the dash row. */
body.fluentare-landing-exercise-cards .sfft-root .sfft-input-stack{
  grid-template-rows:auto 13.2px!important;
  row-gap:2px!important;
}
body.fluentare-landing-exercise-cards .sfft-root .sfft-results{
  display:flex!important;
  height:11px!important;
  overflow:visible!important;
  margin-top:0!important;
}
body.fluentare-landing-exercise-cards .sfft-root .sfft-exercise-view{position:relative;}
body.fluentare-landing-exercise-cards .sfft-root .sfft-corner-tools{
  top:4px!important;right:6px!important;
}
body.fluentare-landing-exercise-cards .sfft-root .sfft-progress{
  color:#405969!important;font-size:12px!important;
}
body.fluentare-landing-exercise-cards .sfft-root .sfft-answer-tools{visibility:visible;}
/* Show confirmation NEXT TO the sentence for the brief success transition. */
body.fluentare-landing-exercise-cards .sfft-input-wrap.flec-qt-done .sfft-input{
  color:transparent!important;caret-color:transparent!important;
}
body.fluentare-landing-exercise-cards .flec-qt-confirmation{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  gap:6px;padding:0 10px;box-sizing:border-box;pointer-events:none;
  color:#202428;font-size:1rem;line-height:1.2;font-weight:700;
}
body.fluentare-landing-exercise-cards .sfft-input-wrap.flec-qt-done .flec-qt-confirmation{display:flex;}
body.fluentare-landing-exercise-cards .flec-qt-confirmation .flec-qt-text{
  max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.fluentare-landing-exercise-cards .flec-qt-confirmation .flec-qt-check{
  color:#27803a;font-weight:900;font-size:20px;line-height:1;
  flex:none;
}
/* Keep score inside the card, clear of the answer/dash row. */
body.fluentare-landing-exercise-cards .sfft-root .sfft-exercise-view:has(.sfft-score:not([hidden])){
  padding-bottom:41px!important;
}


/* BLINKING --------------------------------------------------------------- */
body.fluentare-landing-exercise-cards .flec-blink-group{padding:0 10px 10px!important;}
body.fluentare-landing-exercise-cards .flec-blink-group .wp-block-columns.bf-blink{
  width:100%!important;max-width:100%!important;margin:0!important;padding:9px 0 0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}

body.fluentare-landing-exercise-cards .flec-blink-group>.wp-block-sf-blinking-button.blinking-button-question-wrap{
  width:100%!important;max-width:100%!important;margin:0!important;padding:9px 0 0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}


/* 0.1.9 — one rounded light surface per Blinking item, NOT around its input.
   Leave legacy bf-blink column wrappers unboxed: a column can contain multiple items. */
body.fluentare-landing-exercise-cards .flec-blink-group .wp-block-sf-blinking-button.blinking-button-question-wrap{
  box-sizing:border-box!important;
  margin:9px 0 0!important;
  padding:10px 9px 8px!important;
  border:1px solid #c6d6e0!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:visible!important;
}
/* More daylight around the prompt bar; preserve input's own original geometry. */
body.fluentare-landing-exercise-cards .flec-blink-group .blinking-button-question{
  background:#fff!important;
}
body.fluentare-landing-exercise-cards .flec-blink-group .button.prefix.blinking-btn-d{
  background:#fff!important;
  background-image:none!important;
  color:#233f53!important;
  border-color:#c0d1dd!important;
  box-shadow:none!important;
}
body.fluentare-landing-exercise-cards .flec-blink-group .blinking-btn-d > .text{
  background:#fff!important;
  background-image:none!important;
  color:#233f53!important;
  text-shadow:none!important;
  border-color:#c0d1dd!important;
}
body.fluentare-landing-exercise-cards .flec-blink-group .sf-blink-ex-num{
  background:rgba(255,255,255,.65)!important;color:#29495e!important;
}
/* Both the top prompt and the lower typing area are white, even after
   interaction. Preserve the red/green dashes, completed text and T tooltip. */
body.fluentare-landing-exercise-cards .flec-blink-group .blinking-test-match,
body.fluentare-landing-exercise-cards .flec-blink-group .blinking-test-match input{
  background:#fff!important;
  background-image:none!important;
}
/* Hide the lower typing/feedback area while the item awaits "Clique aqui".
   Blinking core removes input[disabled] on activation (including auto-next), so
   it reappears immediately and remains visible for typed/completed results.
   This is landing-page only; no change to the Blinking plugin itself. */
body.fluentare-landing-exercise-cards .flec-blink-group
  .blinking-button-question-wrap:has(.blinking-test-match input:disabled) .blinking-test-match,
body.fluentare-landing-exercise-cards .flec-blink-group
  .blinking-button-question-wrap:has(.blinking-test-match input:disabled) > .results-block{
  display:none!important;
}

/* No additional rounding around the individual field. */
body.fluentare-landing-exercise-cards .flec-blink-group .blinking-test-match,
body.fluentare-landing-exercise-cards .flec-blink-group .blinking-test-match input{
  border-radius:0!important;
}

/* SENTENCE ORDER --------------------------------------------------------- */
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified,
body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified.sfso-card-bg-blue{padding-bottom:2px!important;}
body.fluentare-landing-exercise-cards .sfso-design-unified.sfso-card-bg-blue .sfso-bank,
body.fluentare-landing-exercise-cards .sfso-design-unified .sfso-bank{background:transparent!important;border-color:transparent!important;}
body.fluentare-landing-exercise-cards .sfso-design-unified .sfso-token:not(.is-position-correct):not(.is-position-wrong),
body.fluentare-landing-exercise-cards .sfso-design-unified .sfso-token:not(.is-position-correct):not(.is-position-wrong):hover,
body.fluentare-landing-exercise-cards .sfso-design-unified .sfso-token:not(.is-position-correct):not(.is-position-wrong):focus-visible{
  background:var(--flec-shell)!important;border:1px solid #aebfca!important;box-shadow:none!important;color:#202428!important;
}
/* Tokens keep the same blue-gray fill after moving into the yellow answer field. */
body.fluentare-landing-exercise-cards .sfso-design-unified .sfso-answer .sfso-token:not(.is-position-correct):not(.is-position-wrong){
  background:var(--flec-shell)!important;border-color:#aebfca!important;color:#202428!important;
}
body.fluentare-landing-exercise-cards .sfso-design-unified.sfso-card-bg-blue .sfso-feedback-row,
body.fluentare-landing-exercise-cards .sfso-design-unified .sfso-feedback-row{background:transparent!important;}

/* QUIZ ------------------------------------------------------------------ */
body.fluentare-landing-exercise-cards .bf-quiz,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container{box-sizing:border-box;max-width:100%;}
body.fluentare-landing-exercise-cards .bf-quiz .wp-block-sf-quiz-container,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container{display:block!important;width:100%!important;padding:0 10px 27px!important;}
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .sf-quiz-score-banner[data-style="ribbon"]{background:rgba(255,255,255,.56)!important;}
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .btn.btn-check,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .btn{margin-bottom:4px!important;}

/* Pull the optional button nearer the final question, without enlarging it. */
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container > ol{
  margin-bottom:12px!important;
}
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .sf-quiz-result-button,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .btn.btn-check,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .btn{
  top:0!important;
}

/* Quiz: the core automatically grades the final answer. Keep the fallback
   "Ver meu resultado" action small and right-aligned, instead of a CTA. */
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .sf-quiz-result-button,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .btn.btn-check,
body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container .btn{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:0!important;
  padding:6px 10px!important;
  font-size:.875rem!important;
  font-weight:600!important;
  line-height:1.2!important;
  border-width:1px!important;
  box-shadow:none!important;
}
/* LISTEN — one clean card for the whole run ----------------------------- */
body.fluentare-landing-exercise-cards .flec-listen-group{padding:0 10px 10px!important;}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important;padding:8px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto!important;
  column-gap:7px!important;row-gap:2px!important;align-items:center!important;
}
/* Intentionally no separator lines between Listen items. */
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .audio-player{
  grid-column:1!important;grid-row:1!important;margin:0!important;background:transparent!important;border-radius:0!important;
  padding:0!important;box-shadow:none!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .play-audio{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-contaiern,
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-container{
  grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;margin:0!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-contaiern input,
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-container input{
  width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .results-block{
  grid-column:2!important;grid-row:2!important;width:auto!important;min-width:0!important;margin:0!important;padding-top:0!important;justify-self:start!important;
}
body.fluentare-landing-exercise-cards .wp-block-columns.bf-listen{
  position:relative!important;left:0!important;width:100%!important;max-width:100%!important;padding-left:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
body.fluentare-landing-exercise-cards .wp-block-columns.bf-listen>.wp-block-column{min-width:0;}

/* LISTEN — top display field toned down to white so it does not compete with the navy header cap. */
body.fluentare-landing-exercise-cards .flec-listen-group .flec-listen-display,
body.fluentare-landing-exercise-cards .flec-listen-group .listen-card-display,
body.fluentare-landing-exercise-cards .flec-listen-group .sf-listen-display{
  background:#ffffff!important;color:#294553!important;border:1px solid #cfd9e0!important;border-radius:10px!important;box-shadow:none!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .flec-listen-display *{color:inherit!important;}


/* 0.1.8 — rounded Listen rows/fields and white display/input surface. */
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode{
  border-radius:10px!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-contaiern,
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-container{
  border-radius:9px!important;
}
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-contaiern input,
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode .answer-container input,
body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode input[readonly]{
  background:#ffffff!important;
  color:#294553!important;
  border-color:#cfd9e0!important;
  border-radius:9px!important;
  box-shadow:none!important;
}

/* Lead capture width ----------------------------------------------------- */
body.fluentare-landing-exercise-cards .flec-lead-card{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
}

/* Compact, progressive-enhanced lead capture. Initial CTA stays discoverable;
   the email field is hidden only after the reveal handler is active. */
body.fluentare-landing-exercise-cards .flec-lead-card{
  padding:10px 12px!important;
  margin-top:10px!important;
  margin-bottom:10px!important;
}
body.fluentare-landing-exercise-cards .flec-lead-card .fluentare-save-progress{
  padding:10px 14px!important;
}
body.fluentare-landing-exercise-cards .flec-lead-card input[type="email"]{
  margin-bottom:8px!important;
}
body.fluentare-landing-exercise-cards .flec-lead-card.flec-lead-compact input[type="email"]{
  display:none!important;
}
body.fluentare-landing-exercise-cards .flec-lead-card.flec-lead-expanded .fluentare-save-progress{
  animation:none!important;
}

@media(max-width:768px){
  body.fluentare-landing-exercise-cards .sfft-root,
  body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container,
  body.fluentare-landing-exercise-cards .flec-blink-group,
  body.fluentare-landing-exercise-cards .flec-listen-group{padding-left:8px!important;padding-right:8px!important;}
  body.fluentare-landing-exercise-cards .sfft-root>.flec-exercise-title,
  body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container>.flec-exercise-title,
  body.fluentare-landing-exercise-cards .flec-blink-group>.flec-exercise-title,
  body.fluentare-landing-exercise-cards .flec-listen-group>.flec-exercise-title{
    margin-left:-8px!important;margin-right:-8px!important;width:calc(100% + 16px)!important;
  }
  body.fluentare-landing-exercise-cards .sfft-root{padding-bottom:9px!important;}
  body.fluentare-landing-exercise-cards .sfft-stage{padding-top:11px!important;}
  body.fluentare-landing-exercise-cards .sfft-cue{margin-left:40px!important;}
  body.fluentare-landing-exercise-cards .sfft-root:not(.sfft-activated) .sfft-answer-row{grid-template-columns:0 minmax(0,1fr) 0!important;column-gap:0!important;}
  body.fluentare-landing-exercise-cards .sfft-root:not(.sfft-activated) .sfft-cue{margin-left:0!important;}
  body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container{padding-bottom:25px!important;}
  body.fluentare-landing-exercise-cards .flec-blink-group,
  body.fluentare-landing-exercise-cards .flec-listen-group{padding-bottom:8px!important;}
  body.fluentare-landing-exercise-cards .flec-sequence-label{margin-top:84px;margin-bottom:9px;font-size:21px;}
  body.fluentare-landing-exercise-cards .flec-sequence-label.flec-sequence-1{margin-top:0;}
  body.fluentare-landing-exercise-cards .flec-exercise-title{font-size:16px!important;padding-top:11px!important;padding-bottom:9px!important;}
  body.fluentare-landing-exercise-cards .wp-block-sf-quiz-container>.flec-exercise-title{margin-bottom:23px!important;}
  body.fluentare-landing-exercise-cards .flec-listen-group>.flec-exercise-title{margin-bottom:12px!important;}
  body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified>.flec-exercise-title{margin-bottom:0!important;}
  body.fluentare-landing-exercise-cards .sfso-root.sfso-design-unified .sfso-title{margin-bottom:0!important;}
  body.fluentare-landing-exercise-cards .flec-listen-group .wp-block-sf-listen.listen-shortcode{column-gap:6px!important;padding:7px 0!important;}
}

/* Mobile parity: same pie, original dash marks and counter position as desktop. */
@media(max-width:768px){
  body.fluentare-landing-exercise-cards .flec-blink-group .wp-block-sf-blinking-button.blinking-button-question-wrap{
    padding:9px 7px 7px!important;margin-top:8px!important;
  }
  body.fluentare-landing-exercise-cards .sfft-root .sfft-input-stack{
    grid-template-rows:auto 13.2px!important;row-gap:2px!important;
  }
  body.fluentare-landing-exercise-cards .sfft-root .sfft-results{
    display:flex!important;height:11px!important;margin-top:0!important;
    overflow:visible!important;
  }
  body.fluentare-landing-exercise-cards .sfft-root .sfft-score{
    bottom:9px!important;right:8px!important;
  }
  body.fluentare-landing-exercise-cards .sfft-root .sfft-corner-tools{
    top:3px!important;right:5px!important;
  }
  body.fluentare-landing-exercise-cards .sfft-root .sfft-input-wrap{min-width:0!important;}
}