/* ===== Inpatient limit basis: Per Person / Per Family dropdown =====
   The quote engine shows the inpatient limit basis as a dropdown. The original
   radio inputs stay in the markup as the engine's source of truth and are
   hidden here, so every existing quote rule keeps working. */
#quote-form .quote-step-cover-selection .inpatient-card>#inpatientScopeGroup>.radio-option{
  display:none!important;
}

#quote-form #inpatientScopeGroup>.scope-select{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Desktop: match the inpatient limit selector next to it. */
@media (min-width:1025px){
  /* The card is a flex row here, so the selector must take a compact fixed
     width instead of the old full-width pill row. */
  #quote-form .quote-step-cover-selection .insurer-card>#inpatientScopeGroup{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #quote-form #inpatientScopeGroup>.scope-select{
    width:auto!important;
    min-width:160px!important;
    max-width:100%!important;
    min-height:38px!important;
    padding:.55rem .75rem!important;
    border:1.5px solid #d9e0e8!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#475569!important;
    font-size:.75rem!important;
    font-weight:600!important;
  }
  #quote-form #inpatientScopeGroup>.scope-select:focus{
    outline:none!important;
    border-color:#86b5b3!important;
    box-shadow:0 0 0 3px rgba(1,111,109,.08)!important;
  }
  #quote-form #inpatientScopeGroup>.scope-select:disabled{
    background:#f5f7f8!important;
    color:#94a3b8!important;
    cursor:not-allowed!important;
  }
}

/* Phone: sit beside the inpatient limit selector in the same segmented row. */
@media (max-width: 1024px){
  #quote-form .quote-step-cover-selection .inpatient-card>#inpatientScopeGroup>.scope-select{
    grid-column:2 / -1!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    border:1px solid #d5e1e0!important;
    border-left:0!important;
    border-radius:0 10px 10px 0!important;
    background:#fff!important;
    color:#526158!important;
    font-size:.8rem!important;
    font-weight:750!important;
  }
  #quote-form .quote-step-cover-selection .inpatient-card>#inpatientScopeGroup>.scope-select:focus{
    outline:none!important;
    border-color:#24767a!important;
    box-shadow:0 0 0 3px rgb(36, 118, 122,.12)!important;
  }
}

/* ===== Outpatient limit basis: Per Person / Per Family dropdown ===== */
#quote-form #outpatientScopeGroup>.radio-option{
  display:none!important;
}
#quote-form #outpatientScopeGroup>.scope-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Desktop: compact dropdown beside the outpatient limit selector. */
@media (min-width:1025px){
  #quote-form #outpatientScopeGroup>.scope-select{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:160px!important;
    max-width:100%!important;
    min-height:38px!important;
    padding:.55rem .75rem!important;
    border:1.5px solid #d9e0e8!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#475569!important;
    font-size:.75rem!important;
    font-weight:600!important;
  }
  #quote-form #outpatientScopeGroup>.scope-select:focus{
    outline:none!important;
    border-color:#86b5b3!important;
    box-shadow:0 0 0 3px rgba(1,111,109,.08)!important;
  }
}

/* Tablet: fill the scope grid cell. */
@media (min-width: 1025px) and (max-width:1024px){
  #quote-form #outpatientScopeGroup>.scope-select{
    grid-column:1 / -1!important;
    min-height:44px!important;
    height:44px!important;
  }
}

/* Phone: sit beside the outpatient limit selector. */
@media (max-width: 1024px){
  #quote-form .quote-step-benefits .limit-scope-wrapper>#outpatientScopeGroup>.scope-select{
    grid-column:2 / -1!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    border:1px solid #d5e1e0!important;
    border-left:0!important;
    border-radius:0 10px 10px 0!important;
    background:#fff!important;
    color:#526158!important;
    font-size:.8rem!important;
    font-weight:750!important;
  }
}

/* ===== Flatten the scope dropdowns on desktop: no nested wrapper box ===== */
@media (min-width:1025px){
  #quote-form #inpatientScopeGroup,
  #quote-form #outpatientScopeGroup{
    display:contents !important;
  }
  #quote-form #outpatientLimit{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  #quote-form #inpatientScopeGroup>.scope-select,
  #quote-form #outpatientScopeGroup>.scope-select{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:160px !important;
  }
}

/* ===== one clean two-part row: Inpatient and Outpatient =====
   Both rows are a single white control with one neutral outline and one
   divider. The selects inside no longer draw outlines or fills of their own,
   so the two segments read as one selector rather than two boxes pushed
   together. Error and focus cues move to the outer row. */
@media (max-width: 1024px){
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .insurer-card.inpatient-card,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-benefits .optional-benefit-row:has(#outpatientLimit) > .form-group{
    display:grid !important;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #bccccd !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card > .inpatient-control > #inpatientLimit,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card > #inpatientScopeGroup > #inpatientScopeSelect,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-benefits .optional-benefit-row:has(#outpatientLimit) > .form-group #outpatientLimit,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-benefits .optional-benefit-row:has(#outpatientLimit) > .form-group #outpatientScopeSelect{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* The one line dividing the limit from its scope. */
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card > .inpatient-control > #inpatientLimit,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-benefits .optional-benefit-row:has(#outpatientLimit) > .form-group #outpatientLimit{
    box-shadow:inset -1px 0 0 #c7d2d3 !important;
  }

  /* The row owns the focus cue, since the selects are now borderless. */
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card:focus-within,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-benefits .optional-benefit-row:has(#outpatientLimit) > .form-group:focus-within{
    border-color:#24767a !important;
    box-shadow:0 0 0 3px rgb(36, 118, 122, .12) !important;
  }

  /* Required cues stay a single red edge, even when a scope is the next step. */
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card:has(#inpatientLimit.inpatient-limit-error),
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card:has(#inpatientLimit.compare-all-select-required),
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card:has(#inpatientLimit.required-blocked),
  html body[data-mobile="true"] #quote-form#quote-form#quote-form
  .quote-step-cover-selection .inpatient-card:has(#inpatientScopeSelect.scope-step-required){
    border-color:#dc2626 !important;
    box-shadow:0 0 0 3px rgba(220, 38, 38, .13) !important;
  }
}