/* ===== quote-attention =====
   A step the visitor has not done yet is shown on the control itself: the
   selector's own text and its label turn red and grow. This replaces the
   floating "Select Principal Age" / "Select Inpatient First" note that used to
   pop up over the form when a click was blocked.

   The repeated id (#quote-form#quote-form#quote-form) is deliberate: the golden
   "next step" cue in quote-required-cues.css is written with three ids inside
   the members step, and a blocked control has to win over it. */

/* The control the visitor still has to fill in. */
#quote-form#quote-form#quote-form #principalAge.member-attention,
#quote-form#quote-form#quote-form #principalAge.sequence-prerequisite-error,
#quote-form#quote-form#quote-form #childrenCount.member-attention,
#quote-form#quote-form#quote-form #childrenAge017.member-attention,
#quote-form#quote-form#quote-form #childrenAge1824.member-attention,
#quote-form#quote-form#quote-form #inpatientLimit.member-attention,
#quote-form#quote-form#quote-form #inpatientLimit.limit-attention-red,
#quote-form#quote-form#quote-form #inpatientLimit.sequence-prerequisite-error,
#quote-form#quote-form#quote-form #outpatientLimit.sequence-prerequisite-error,
#quote-form#quote-form#quote-form #maternityLimit.sequence-prerequisite-error,
#quote-form#quote-form#quote-form #dentalLimit.sequence-prerequisite-error,
#quote-form#quote-form#quote-form #opticalLimit.sequence-prerequisite-error,
#quote-form#quote-form#quote-form input.sequence-prerequisite-error,
#quote-form#quote-form#quote-form input.member-attention,
#quote-form#quote-form#quote-form .member-attention-card select.member-attention,
#quote-form#quote-form#quote-form .member-attention-card select.limit-attention-red{
  color:#c62828!important;
  -webkit-text-fill-color:#c62828!important;
  font-size:1.02rem!important;
  font-weight:800!important;
}
/* The label above (or beside) the control, at the size that reads at a glance. */
#quote-form#quote-form#quote-form .member-attention-field>label,
#quote-form#quote-form#quote-form .member-attention-field label,
#quote-form#quote-form#quote-form .member-attention-field>label span,
#quote-form#quote-form#quote-form .member-attention-field label span,
#quote-form#quote-form#quote-form .member-attention-field>strong,
#quote-form#quote-form#quote-form .member-attention-field small,
#quote-form#quote-form#quote-form .member-attention-field .children-band-label strong,
#quote-form#quote-form#quote-form .member-attention-field .group-plain-heading strong{
  color:#c62828!important;
  -webkit-text-fill-color:#c62828!important;
  font-size:1.02rem!important;
  font-weight:800!important;
}
/* The Inpatient Limit heading sits in the card header, beside the select. */
#quote-form#quote-form#quote-form .member-attention-card .cover-type-heading,
#quote-form#quote-form#quote-form .member-attention-card .cover-type-heading span,
#quote-form#quote-form#quote-form .member-attention-card .cover-type-heading strong,
#quote-form#quote-form#quote-form .member-attention-card .cover-type-heading p{
  color:#c62828!important;
  -webkit-text-fill-color:#c62828!important;
  font-size:1.02rem!important;
  font-weight:800!important;
}
#quote-form#quote-form#quote-form .member-attention-card .cover-type-heading i{
  color:#c62828!important;
  background:#fdeaea!important;
}
/* A greyed-out control must not swallow the click: it has to reach the wrapper
   around it, so a click on a locked benefit can name the step that unlocks it. */
#quote-form select:disabled,
#quote-form input:disabled{
  pointer-events:none!important;
}
/* With the click passing through, the wrapper carries the blocked cursor. */
#quote-form .form-group:has(select:disabled),
#quote-form .limit-scope-wrapper:has(select:disabled),
#quote-form .inpatient-control:has(select:disabled),
#quote-form .optional-benefit-row:has(select:disabled){
  cursor:not-allowed;
}
/* The line under a child box that is still waiting for the one before it: the
   box to answer is marked red above, and this says which one it is. */
#quote-form .child-sequence-hint{
  margin:0.35rem 0 0;
  color:#c62828;
  font-size:0.72rem;
  font-weight:800;
  line-height:1.35;
}

/* The option the control is showing follows the same red while it is blocked. */
#quote-form#quote-form#quote-form #principalAge.member-attention option[value=""],
#quote-form#quote-form#quote-form #principalAge.sequence-prerequisite-error option[value=""],
#quote-form#quote-form#quote-form #inpatientLimit.limit-attention-red option[value=""],
#quote-form#quote-form#quote-form #inpatientLimit.limit-attention-red option[value="all"],
#quote-form#quote-form#quote-form #inpatientLimit.limit-attention-red option[value="none"],
#quote-form#quote-form#quote-form #inpatientLimit.sequence-prerequisite-error option[value=""],
#quote-form#quote-form#quote-form #inpatientLimit.sequence-prerequisite-error option[value="all"],
#quote-form#quote-form#quote-form #inpatientLimit.sequence-prerequisite-error option[value="none"]{
  color:#c62828!important;
  font-weight:800!important;
}
@media (max-width: 1024px){
  #quote-form#quote-form#quote-form .member-attention-field>label,
  #quote-form#quote-form#quote-form .member-attention-field label,
  #quote-form#quote-form#quote-form .member-attention-card .cover-type-heading,
  #quote-form#quote-form#quote-form .member-attention-card .cover-type-heading span,
  #quote-form#quote-form#quote-form #principalAge.member-attention,
  #quote-form#quote-form#quote-form #inpatientLimit.limit-attention-red{
    font-size:1.06rem!important;
  }
}

/* The locked Inpatient selector keeps its own wording. When the visitor tries
   to use it, the reason flashes in the control itself with the same red
   attention treatment as the other blocked steps. */
#quote-form #inpatientLimit.inpatient-lock-hint{
  color:#c62828!important;
  -webkit-text-fill-color:#c62828!important;
  border-color:#c62828!important;
  animation:inpatient-lock-hint 2.6s ease-out;
}
@keyframes inpatient-lock-hint{
  0%{box-shadow:0 0 0 0 rgba(198,40,40,.42),0 0 16px rgba(198,40,40,.38);}
  55%{box-shadow:0 0 0 5px rgba(198,40,40,.14),0 0 16px rgba(198,40,40,.3);}
  100%{box-shadow:none;}
}

/* Any click on a greyed area sends the visitor to the control that unlocks it.
   That control - the field box itself, the insurer chips or the inpatient card -
   glows and fades three times so the eye lands on the answer. */
#quote-form .blocked-target-pulse{
  border-radius:10px;
  animation:blocked-target-pulse 2.4s ease-in-out;
}
@keyframes blocked-target-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,0);}
  10%{box-shadow:0 0 0 4px rgba(198,40,40,.34),0 0 20px rgba(198,40,40,.45);}
  25%{box-shadow:0 0 0 0 rgba(198,40,40,0);}
  40%{box-shadow:0 0 0 4px rgba(198,40,40,.34),0 0 20px rgba(198,40,40,.45);}
  55%{box-shadow:0 0 0 0 rgba(198,40,40,0);}
  70%{box-shadow:0 0 0 4px rgba(198,40,40,.28),0 0 16px rgba(198,40,40,.38);}
  85%{box-shadow:0 0 0 0 rgba(198,40,40,0);}
}
@media (prefers-reduced-motion: reduce){
  #quote-form .blocked-target-pulse{
    animation:none;
    box-shadow:0 0 0 3px rgba(198,40,40,.32),0 0 16px rgba(198,40,40,.38);
  }
}

/* The Inpatient selector keeps the same thin teal border as the other benefit
   selectors. A step that is still missing is said by the red wording, the
   warning line and the transient pulse - not by a permanently red outline. */
#quote-form#quote-form#quote-form #inpatientLimit.inpatient-limit-error:not(:disabled),
#quote-form#quote-form#quote-form #inpatientLimit.limit-step-required:not(:disabled),
#quote-form#quote-form#quote-form #inpatientLimit.compare-all-select-required:not(:disabled),
#quote-form#quote-form#quote-form #inpatientLimit.sequence-prerequisite-error:not(:disabled),
#quote-form#quote-form#quote-form #inpatientLimit.limit-attention-red:not(:disabled){
  border:1.5px solid #017a78!important;
  box-shadow:none!important;
  background:#fff!important;
}
/* A locked Inpatient selector stays grey. The controls that unlock it are the
   ones that blink, so this one never glows or turns into an active field. */
#quote-form#quote-form#quote-form #inpatientLimit:disabled,
#quote-form#quote-form#quote-form #inpatientLimit.optional-benefit-disabled{
  background:#f1f3f5!important;
  color:#9aa3ad!important;
  -webkit-text-fill-color:#9aa3ad!important;
  border:1.5px solid #017a78!important;
  box-shadow:none!important;
  animation:none!important;
}
#quote-form #inpatientLimit.inpatient-lock-hint:disabled{
  animation:none!important;
}
#quote-form #inpatientLimit:focus,
#quote-form #inpatientLimit:focus-visible{
  outline:none!important;
}