/* BUILD: sf-blinking.css v1.8.3 + iOS completed-tooltip tap fix; next-item cue removed — 14 - 10 - 2026
   Blinking CSS module

   v1.8 changes:
   - adds a small top-right visual number for each Blinking exercise
   - number styling isolated in .sf-blink-ex-num
   - first version uses a simple round badge for easy font testing

   v1.7 changes:
   - fixed mobile tap-highlight flash when tapping T tooltip
   - suppressed native tap highlight on completed inline translation layer

   Notes:
   - completed sentence rendered inline before translation trigger
   - tooltip text wrapping override maintained
*/

/* -----------------------------------------
   BLINKING: center the widget wrapper
   ----------------------------------------- */
.wp-block-columns.bf-blink{
  width: 100% !important;
  max-width: 1100px !important; /* adjust if needed */
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* -----------------------------------------
   BLINKING (mobile): bring dashes closer to input
   ----------------------------------------- */
@media (max-width: 768px){
  .blinking-button-question-wrap .results-block{
    margin-top: -8px !important;
    padding-top: 0 !important;
  }
  .blinking-button-question-wrap input{
    margin-bottom: 0 !important;
  }
  .blinking-button-question-wrap{
    row-gap: 0 !important;
  }
}

/* -----------------------------------------
   BLINKING (desktop): dashes below input + remove right empty space
   ----------------------------------------- */
@media (min-width: 769px){

  .blinking-button-question-wrap{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .blinking-button-question-wrap > div.text{
    flex: 0 0 160px !important;
    max-width: 160px !important;
    margin-right: 10px !important;
    white-space: nowrap !important;
  }

  .blinking-button-question-wrap input{
    flex: 1 1 auto !important;
    min-width: 320px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .blinking-button-question-wrap .results-block{
    order: 99 !important;
    flex: 0 0 100% !important;
    width: 100% !important;

    position: static !important;
    float: none !important;
    clear: both !important;

    margin-top: -18px !important;
    margin-left: 0 !important;
    right: auto !important;
    top: auto !important;
    text-align: left !important;
  }

  .blinking-button-question-wrap .results-block .mark{
    width: 14px !important;
    height: 5px !important;
    margin: 0 2px 6px 0 !important;
    border-radius: 2px !important;
  }
}

/* =========================================================
   BUILD: sf-blinking.css v1.5 — 11-03-2026
   Blinking inline completion layer
   Fixes:
   - completed sentence shown before T
   - only T stays hover/click active
   - blank sentence area no longer behaves like tooltip trigger
   ========================================================= */

.blinking-button-question-wrap .blinking-test-match{
  position: relative;
}

.blinking-button-question-wrap .sf-blink-complete-inline{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  white-space: nowrap;
  z-index: 3;
  max-width: calc(100% - 24px);
  /* The completed sentence is a separate layer above a text input.
     Its T must be reliably hit-testable on iOS Safari. */
  pointer-events: auto;
  color: #000 !important;
}

.blinking-button-question-wrap .sf-blink-complete-sentence{
  white-space: nowrap;
  color: #000 !important;
  cursor: text;
  pointer-events: none;
}

.blinking-button-question-wrap.sf-blink-show-complete-inline .blinking-test-match input{
  color: transparent !important;
  caret-color: transparent !important;
}

.blinking-button-question-wrap.sf-blink-show-complete-inline .blinking-test-match input::placeholder{
  color: transparent !important;
}

/* Completed Blinking: only the displayed T is interactive, never the
   underlying answer input. Prevents iOS Safari selecting/refocusing the
   input when the student tries to open the Portuguese translation. */
.blinking-button-question-wrap.sf-blink-show-complete-inline .blinking-test-match input{
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.blinking-button-question-wrap.sf-blink-show-complete-inline .sf-blink-complete-inline,
.blinking-button-question-wrap.sf-blink-show-complete-inline .sf-blink-translation{
  pointer-events: auto !important;
  touch-action: manipulation;
}


.blinking-button-question-wrap .sf-blink-complete-inline .sf-blink-translation{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
  margin-left: 6px;
  pointer-events: auto;
}




/* BLINKING: tooltip text must wrap normally even though the completed inline layer uses nowrap */
.blinking-button-question-wrap .sf-blink-translation .tooltip_templates,
.blinking-button-question-wrap .sf-blink-translation .tooltip_content{
  white-space: normal !important;
  max-width: calc(100vw - 24px) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}




/* =========================================================
   BLINKING: mobile tap-flash suppression on completed T chain
   Reason:
   - Console test 3A removed the flash only when suppression was
     applied to the full tapped chain, not just the T element.
   - On mobile, the flash is a native tap/active paint effect,
     not real text selection and not input focus.
   Scope:
   - Blinking only
   - completed inline translation chain
   ========================================================= */

.blinking-button-question-wrap,
.blinking-button-question-wrap .blinking-test-match,
.blinking-button-question-wrap .sf-blink-complete-inline,
.blinking-button-question-wrap .sf-blink-complete-sentence,
.blinking-button-question-wrap .sf-blink-translation,
.blinking-button-question-wrap .sf-blink-translation *{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  outline: none !important;
}

.blinking-button-question-wrap *:focus,
.blinking-button-question-wrap *:active{
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   BLINKING: visual exercise number
   First safe version:
   - small round badge
   - top-right of the blue exercise area
   - easy to restyle later (font / size / circle / no-circle)
   ========================================================= */

.blinking-button-question-wrap .button.prefix.blinking-btn-d{
  position: relative !important;
}

.blinking-button-question-wrap .sf-blink-ex-num{
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 6;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85) !important;

  font-family: "Days One", sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;

  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px){
  .blinking-button-question-wrap .sf-blink-ex-num{
    top: 2px;
    right: 6px;
    width: 19px;
    height: 19px;
    font-size: 9px;
  }
}

/* =========================================================
   QA-07 candidate (1.1.6): iOS Safari idle Blinking paint

   Only applies BEFORE a learner opens an exercise, and only
   in WebKit environments supporting -webkit-touch-callout.
   Reset native disabled-input painting and explicitly retain
   the established button/input colors.  Do not alter JS,
   active typing, completion, translation or next-item behavior.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  .blinking-button-question-wrap:not(.active):not(.sf-blink-completed) .button.prefix.blinking-btn-d {
    background-color: #047cbc !important;
    background-image: none !important;
  }

  .blinking-button-question-wrap:not(.active):not(.sf-blink-completed) .blinking-btn-d > div.text {
    background-color: #047cbc !important;
    background-image: none !important;
    opacity: 1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  .blinking-button-question-wrap:not(.active):not(.sf-blink-completed) .blinking-test-match input:disabled {
    -webkit-appearance: none;
    appearance: none;
    opacity: 1 !important;
    background-color: #ddd !important;
    background-image: none !important;
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .blinking-button-question-wrap:not(.active):not(.sf-blink-completed) .blinking-test-match input:disabled::placeholder {
    color: #333 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #333 !important;
  }
}