@charset "utf-8";
/* =========================================================================
   popupMobile.css  — Mobile layout for CBC / Costco colorbox popup iframes.
   Merged from popup_mobile.css + legacy popupMobile.css (June 2026).

   Link in every popup AFTER theme.css:
       <link href="../styles/popupMobile.css" rel="stylesheet"
             media="screen and (max-width:799px)">

   Every rule is wrapped in its own @media block so the file is safe even
   if linked without a media attribute.

   Sections:
     1. Base popup reset (typography, inputs, selects, buttons, form tables)
     2. Employee form  (.shoppingCartTable.fsize_65)
     3. ICHRA / Life Insurance consult  (.popupFormTable)
     4. reCalcPremium  (.recalcPopup)
     5. QLE / Medical check  (life-event fields)
     6. 360px floor
     7. Popup compareTable sticky fix
     8. psTotalRow background (all widths)

   Key TR/TD padding principle (applied throughout):
     TR elements carry ZERO padding — all spacing lives on TD only.
     This prevents the double-stack gap between a coloured TD background
     and the edge of its containing TR card.

   Font-hierarchy notes (theme.css uses rem for fsize1_x, em for fsize_x):
     .fsize_65  = .65em   (em — scales with parent)
     .fsize1_4  = 1.4rem  (rem — fixed relative to root)
     .fsize1_5  = 1.5rem  (rem — fixed relative to root)
     .fsize1_75 = 1.75rem (rem — fixed relative to root)

   On mobile:  h1.popHeader ≥ h2 ≥ h3 > body (1rem) > footnotes (≥.85rem)
   All heading sizes use rem (immune to parent fsize chains).
   ========================================================================= */


/* =========================================================================
   1. BASE POPUP RESET
   ========================================================================= */
@media only screen and (max-width:799px){

  /* ── Shell ──────────────────────────────────────────────────────────── */
  html, body{
    margin:0;
    padding:0 0 .75em;
    box-sizing:border-box;
    overflow-x:hidden;
    max-width:100%;
  }

  /* Suppress extra <p> margins inside popHeader */
  .popHeader p, h1.popHeader p{ margin:0; padding:0; }

  /* ── HEADING HIERARCHY (rem — immune to fsize inheritance chain) ──── */
  .popHeader, h1.popHeader{
    font-size:1.5rem !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    padding:.5em 3.5em .5em .85em !important;  /* right-pad clears close btn */
    margin:0 !important;
    box-sizing:border-box !important;
  }

  h2{
    font-size:1.25rem !important;
    font-weight:700 !important;
    line-height:1.3;
    margin:.5em 0 .3em;
  }

  h3{
    font-size:1.1rem !important;
    font-weight:600 !important;
    line-height:1.3;
    margin:.4em 0 .25em;
  }

  /* ── RESET .pad25 so fsize chain starts fresh ───────────────────── */
  /* .pad25.fsize1_4 = 1.4rem from theme — that makes body > headings.
     We reset to 1rem so all descendants compute from a clean base.   */
  .pad25{
    font-size:1rem !important;
    padding:1em !important;
    box-sizing:border-box;
  }

  /* Cap over-sized fsize body classes inside popup content.
     Buttons are excluded — they get their font-size from theme.css. */
  .pad25 .fsize1_6:not([class*="Button"]),
  .pad25 .fsize1_5:not([class*="Button"]),
  .pad25 .fsize1_4:not([class*="Button"]){
    font-size:1rem !important;
  }

  /* Minimum footnote sizes */
  .fsize_85{ font-size:.85rem !important; }
  .fsize_9 { font-size:.9rem  !important; }

  /* ── ALL INPUTS: min 44px tap target, visible border, focus ring ── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="password"],
  input:not([type]){
    min-height:44px !important;
    box-sizing:border-box !important;
    padding:0 .75em !important;
    font-size:1rem !important;
    border:1.5px solid #b3c8df !important;
    border-radius:4px !important;
    background:#fff !important;
    outline:none !important;
  }
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="password"]:focus{
    border-color:#005dab !important;
    outline:2px solid #005dab !important;
    outline-offset:1px !important;
  }

  /* ── ALL SELECTS: same 44px rule + custom caret ─────────────────── */
  select{
    min-height:44px !important;
    box-sizing:border-box !important;
    padding:0 2.2em 0 .75em !important;
    font-size:1rem !important;
    border:1.5px solid #b3c8df !important;
    border-radius:4px !important;
    background-color:#fff !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23005DAB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right .65em center !important;
    background-size:.85em auto !important;
    outline:none !important;
  }
  select:focus{
    border-color:#005dab !important;
    outline:2px solid #005dab !important;
    outline-offset:1px !important;
  }

  /* Wide selects that would otherwise overflow viewport */
  select[style*="width:31em"],
  select[style*="width:15em"],
  select[style*="width:5em"]{ width:100% !important; max-width:100% !important; }

  /* ── BUTTONS: flex for icon alignment, 44px tap target ─────────── */
  /* No font-size override — theme.css handles button sizing.          */
  a.blueButton,  button.blueButton,  .blueButton,
  a.greenButton, button.greenButton, .greenButton,
  a.redButton,   button.redButton,   .redButton,
  a.greyButton,  button.greyButton,  .greyButton{
    display:block !important;
    float:none !important;
    width:95% !important;
    height:auto !important;
    min-height:44px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    margin:.5em .5em !important;
    padding:.65em 1em !important;
    line-height:1.3 !important;
    gap:.4em;
  }
  a.blueButton:focus-visible,
  a.greenButton:focus-visible,
  button:focus-visible{
    outline:3px solid #ffbf47 !important;
    outline-offset:2px !important;
  }
  .width150px{ width:100% !important; box-sizing:border-box !important; }

  /* ── 2-UP FORM TABLES → single column ───────────────────────────── */
  /* TD-only padding principle: TR carries zero padding, TD carries all. */
  .pad25 form table,
  .pad25 form tbody{ display:block; width:100% !important; }

  .pad25 form tr{
    display:block;
    width:100% !important;
    padding:0 !important;          /* ZERO — prevents double-stack with TD  */
    margin:0;
  }

  .pad25 form td{
    display:block;
    width:100% !important;
    text-align:left !important;
    padding:.3em 0 !important;     /* TD carries all spacing                */
    box-sizing:border-box;
  }
  .pad25 form td[align="right"]{ text-align:left !important; }
  .pad25 form label{ display:inline-block; margin:.1em 0 .25em; }

  /* Bare links inside form cells (e.g. "Login Here!") — 44px tap target.
     Excludes tooltip anchors and button-class anchors which have their
     own rules. */
  .pad25 form td > a:not([class*="Button"]):not(.tooltip){
    display:inline-block;
    min-height:44px;
    padding:.65em 0;
    line-height:1.3;
    box-sizing:border-box;
  }

  .pad25 .selectContainer{ display:inline-block; }

  /* selectContainer inside a form cell: override all four theme.css
     properties that cause clipping on mobile.
     theme.css sets: height:1.5em  overflow:hidden  position:relative
     top:6px  display:inline-block — any one of these can clip or
     misplace the <select> when a long label wraps to a second line.
     Specificity 0,3,0 beats the 0,1,0 theme.css rule cleanly.       */
  .pad25 form td .selectContainer{
    display:block !important;     /* was inline-block                  */
    width:100% !important;        /* fill the TD                       */
    height:auto !important;       /* was 1.5em — lets content breathe  */
    overflow:visible !important;  /* was hidden — stop clipping select */
    position:static !important;   /* was relative top:6px — remove nudge */
  }

  /* ── VALIDATION / ERROR BLOCKS ──────────────────────────────────── */
  /* Prevent absolutely-positioned error boxes overlapping content      */
  .pad25 #FormErrors,
  .pad25 .notation[style*="absolute"],
  .pad25 .notation[style*="Absolute"]{
    position:static !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
  }
	div.inline.notation{display:block;
	}
	.callout{display:none;}
  /* ── TOOLTIPS ────────────────────────────────────────────────────── */
  .pad25 .tooltip{ position:relative; }
  .pad25 .tooltip span{
    width:80vw !important;
    max-width:480px !important;
    left:0 !important;
    right:auto !important;
    box-sizing:border-box;
  }
}


/* =========================================================================
   1b. IFRAME DOUBLE SCROLLBAR FIX  (all widths — NOT mobile-only)
   Both <html> and <body> inside this iframe can independently become
   scrollable once content overflows (a common cross-browser quirk), so
   the SAME content gets two separate scroll mechanisms — and since this
   iframe loads the same theme.css as the parent page, both pick up
   theme.css's global ::-webkit-scrollbar styling, rendering as two
   identical thick blue bars side by side.
   Fix: suppress scrolling on <html> only, leaving <body> as the single
   scrollable element. (An earlier version of this rule suppressed BOTH
   html and body, which removed scrolling entirely instead of just the
   duplicate — confirmed broken via screenshot, corrected here.)
   This is the one rule in this file intentionally NOT wrapped in a
   max-width media query — the double-scrollbar isn't a mobile-only
   symptom, and some popups (like requestICHRAConsult.html) link this
   file without the usual <=799px media attribute on the <link> itself. */
html{
  height:100%;
  overflow-y:hidden;
}
body{
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}


/* =========================================================================
   2. EMPLOYEE FORM  (AddEmployee.html / EditEmployee.html)
      .shoppingCartTable.fsize_65

   TD-only padding: TR.padding=0 prevents the double-stack gap between the
   coloured tableTitle TD background and the TR card edge.

   Cascade notes:
   – Section 9  (0,2,1): gives <tr> card  padding:.7em .85em
   – Section 17 (0,4,1): gives <tr> grid  padding:.7em .85em
   Both neutralised here at (0,4,1) + !important.
   ========================================================================= */
@media only screen and (max-width:799px){

  .shoppingCartTable.fsize_65,
  .shoppingCartTable.fsize_65 tbody{
    display:block !important;
    width:100% !important;
  }

  /* Column headings: hidden — rendered as ::before labels on each TD */
  .shoppingCartTable.fsize_65 tr.colHeading{ display:none !important; }

  /* NEUTRALISE Section 9 + Section 17 card/grid padding on TR.
     TD-only padding principle applied — TR carries zero padding.     */
  .shoppingCartTable.fsize_65 tr:not(.colHeading):not(.totals){
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:none !important;
    gap:0 !important;
    grid-template-columns:none !important;
    box-sizing:border-box !important;
  }

  /* Subtle divider between consecutive non-title rows */
  .shoppingCartTable.fsize_65 tr:not(.colHeading):not(.totals)
  + tr:not(.colHeading):not(.totals){
    border-top:1px solid #eaeff7 !important;
  }

  /* Totals row (Add Dependent link) */
  .shoppingCartTable.fsize_65 tr.totals{
    display:block !important;
    padding:.25em 0 !important;
    border:none !important;
  }
  .shoppingCartTable.fsize_65 tr.totals td{
    padding:.4em .75em !important;
  }
  .shoppingCartTable.fsize_65 tr.totals td a{
    color:#005dab;
    font-weight:700;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.3em;
    font-size:1rem;
    min-height:44px;
  }
  .shoppingCartTable.fsize_65 tr.totals td a:hover{ text-decoration:underline; }

  /* ── SECTION TITLE cell (Personal Information / Dependent Information)
     TR has zero padding so this TD background sits flush at the card edges.
     fsize1_75 = 1.75rem from theme; override with 1.1rem.
     rem bypasses the .65em table context.                              */
  .shoppingCartTable.fsize_65 td.tableTitle{
    display:block !important;
    width:100% !important;
    padding:.6em .85em !important; /* TD carries all spacing — no gap       */
    margin:0 !important;
    box-sizing:border-box !important;
    background:#0B5EA2 !important;
    color:#fff !important;
    font-size:1.1rem !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    border-radius:0 !important;
    text-align:left !important;
  }
  /* Kill the fsize1_75 multiplier inside employee tables */
  .shoppingCartTable.fsize_65 .fsize1_75{ font-size:inherit !important; }

  /* ── DATA CELLS: 1rem cancels the .65em table inheritance ────────── */
  .shoppingCartTable.fsize_65 td:not(.tableTitle){
    display:block !important;
    width:100% !important;
    padding:.55em .85em !important;
    box-sizing:border-box !important;
    text-align:left !important;
    border:0 !important;
    font-size:1rem !important;
  }

  /* ── DATA LABELS: column headings as ::before pseudo-labels ──────── */
  .shoppingCartTable.fsize_65 td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:.9rem;
    font-weight:700;
    color:#005dab;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:.3em;
  }

  /* Inputs + selects: full-width (44px already set in Section 1) */
  .shoppingCartTable.fsize_65 input[type="text"],
  .shoppingCartTable.fsize_65 select{ width:100% !important; }

  /* selectContainer: full-width, no negative margin */
  .shoppingCartTable.fsize_65 .selectContainer{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* ── DELETE CELL: full-width red button ──────────────────────────── */
  .shoppingCartTable.fsize_65 td[data-label="Delete"]::before{
    display:none !important;
  }
  .shoppingCartTable.fsize_65 td[data-label="Delete"]{
    padding:.65em .85em !important;
    background:#f7fafd !important;
    border-top:1px solid #d8e2ec !important;
  }
  .shoppingCartTable.fsize_65 td[data-label="Delete"] a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.45em !important;
    width:100% !important;
    min-height:44px !important;
    background:#DE2127 !important;
    color:#fff !important;
    font-weight:700 !important;
    font-size:1rem !important;
    letter-spacing:.05em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    border-radius:6px !important;
    padding:.55em 1em !important;
    box-sizing:border-box !important;
    transition:background .18s ease;
  }
  .shoppingCartTable.fsize_65 td[data-label="Delete"] a::before{
    content:"DELETE ";
  }
  .shoppingCartTable.fsize_65 td[data-label="Delete"] a .fa{
    color:#fff !important;
  }
  .shoppingCartTable.fsize_65 td[data-label="Delete"] a:hover,
  .shoppingCartTable.fsize_65 td[data-label="Delete"] a:focus{
    background:#b81118 !important;
  }
  .shoppingCartTable.fsize_65 td[data-label="Delete"] a:focus-visible{
    outline:3px solid #ffbf47 !important;
    outline-offset:2px !important;
  }
}


/* =========================================================================
   3. ICHRA / Life Insurance consult  (4-column form → stacked)
   ========================================================================= */
@media only screen and (max-width:799px){

  .popupFormTable,
  .popupFormTable tbody{ display:block !important; width:100% !important; }

  .popupFormTable tr{
    display:block !important;
    padding:0 !important;          /* ZERO — TD carries all spacing         */
  }

  .popupFormTable td{
    display:block !important;
    width:100% !important;
    text-align:left !important;
    padding:.35em 0 !important;
    box-sizing:border-box !important;
  }
  .popupFormTable td[align="right"]{
    padding-top:.7em !important;
    font-weight:600;
  }
  .popupFormTable td[colspan="2"],
  .popupFormTable td[colspan="4"]{ width:100% !important; }
  .popupFormTable input[type="text"]{ width:100% !important; }
  .popupFormTable select{ width:100% !important; max-width:100% !important; }
  .popupFormTable textarea{
    width:100% !important;
    box-sizing:border-box !important;
    min-height:8em;
    border:1.5px solid #b3c8df;
    border-radius:4px;
    font-size:1rem;
    padding:.5em .75em;
  }
  .popupFormTable textarea:focus{
    border-color:#005dab;
    outline:2px solid #005dab;
    outline-offset:1px;
  }
}


/* =========================================================================
   4. reCalcPremium  (compareTable layout → block, body.recalcPopup scope)
   ========================================================================= */
@media only screen and (max-width:799px){

  .recalcPopup .compareTable,
  .recalcPopup .compareTable tbody{ display:block !important; width:100% !important; }

  .recalcPopup .compareTable tr{
    display:block !important;
    padding:0 !important;          /* ZERO — TD carries all spacing         */
  }

  .recalcPopup .compareTable td{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .recalcPopup td.fsize1_25 label,
  .recalcPopup td.fsize1_25 select,
  .recalcPopup td.fsize1_25 input[type="text"]{
    display:block;
    margin-top:.4em;
    width:100% !important;
    box-sizing:border-box;
  }
  .recalcPopup td.fsize1_25 strong.darkblue{ display:block; margin-top:.25em; }
}


/* =========================================================================
   5. QLE / Medical check  (life-event selects + floated subsidy form)
   ========================================================================= */
@media only screen and (max-width:799px){

  #LifeEvent_Select{ width:100% !important; max-width:100% !important; }
  #LifeEvent_InputEvent,
  #LifeEvent_InputStart,
  #LifeEvent_InputEnd,
  #InputEffectiveDate{ width:100% !important; max-width:16em; }

  #leadquote_Checksubsidy_div,
  #LeadQuote_CheckSubsidy_Size_div,
  #LeadQuote_FamilyIncome_div,
  #Subsidy_Note{
    float:none !important;
    display:block !important;
    clear:both;
    margin-bottom:.5em !important;
  }
  #LeadQuote_FamilyIncome{ width:100% !important; max-width:16em; }
  #LeadQuote_CostcoMemberNumber{ min-height:44px; width:10em; }
}


/* =========================================================================
   6. 360px floor
   ========================================================================= */
@media only screen and (max-width:360px){
  body{ padding:0 0 .5em; }
  .popHeader, h1.popHeader{ font-size:1.3rem !important; }
  h2{ font-size:1.1rem !important; }
  h3{ font-size:1.05rem !important; }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select{ font-size:1rem !important; }
}


/* =========================================================================
   7. Popup compareTable sticky fix
   body has overflow-x:hidden (Section 1) which creates a new containing
   block that breaks position:sticky inside a compareTable.
   Fix: move overflow-x:auto to .tableScrollWrap; restore display:table
   on the compareTable so sticky cells can anchor to the wrapper.
   ========================================================================= */
@media only screen and (max-width:799px){

  /* ── .tableScrollWrap is the horizontal scroll container ─────────── */
  .pad25 .tableScrollWrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,93,171,.18), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,93,171,.18), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:3em 100%, 3em 100%, .9em 100%, .9em 100%;
    background-attachment:local, local, scroll, scroll;
  }

  /* ── compareTable inside popup: real table display ───────────────── */
  /* Overrides mobile.css Section 13's display:block on .compareTable   */
  .pad25 .tableScrollWrap .compareTable{
    display:table !important;
    overflow-x:visible !important;
    background:none !important;    /* gradient lives on wrapper, not table  */
    min-width:100%;
    width:auto;
  }
  /* Restore table-internal display */
  .pad25 .tableScrollWrap .compareTable thead{ display:table-header-group; }
  .pad25 .tableScrollWrap .compareTable tbody{ display:table-row-group; }
  .pad25 .tableScrollWrap .compareTable tr   { display:table-row; }
  .pad25 .tableScrollWrap .compareTable td,
  .pad25 .tableScrollWrap .compareTable th   { display:table-cell; }

  /* ── Sticky first-column backgrounds ─────────────────────────────── */
  .pad25 .compareTable thead th:first-child,
  .pad25 .compareTable tbody th:first-child,
  .pad25 .compareTable tr .tdRowHeading{
    background:#eff7ff;
	font-size:.8em;
  }
  .pad25 .compareTable .planDetailTableHdrLightBlue th:first-child,
  .pad25 .compareTable .planDetailTableHdrLightBlue .tdRowHeading{
    background:#4079B9;
    z-index:3;
  }
  .pad25 .compareTable .psTotalRow .tdRowHeading{
    background:#f9f9f9;
  }

  /* Employee Premium Details tables in popup Premium Summary */
  .pad25 .psTableTitle + .tableScrollWrap .compareTable tr > td:first-child,
  .pad25 .psTableTitle + .tableScrollWrap .compareTable tr > th:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:#eff7ff;
  }
  .pad25 .psTableTitle + .tableScrollWrap
    .compareTable .planDetailTableHdrLightBlue th:first-child{
    background:#4079B9;
    z-index:3;
  }
  .pad25 .psTableTitle + .tableScrollWrap
    .compareTable .psTotalRow td:first-child,
  .pad25 .psTableTitle + .tableScrollWrap
    .compareTable .psTotalRow th:first-child{
    background:#f9f9f9;
  }
}


/* =========================================================================
   8. psTotalRow background  (all widths — no media query)
   ========================================================================= */
.pad25 .psTotalRow{
  background:#f9f9f9;
}
.pad25 .psTotalRow th,
.pad25 .psTotalRow td{
  font-weight:700;
  color:#1a1a1a;
}


/* =========================================================================
   9. SGplanExport "Export Plan Comparison" popups
      (.exportHeader info panel + .exportDemoTable covered-individuals table)
      Both live inside .pad25 in SGplanExport_*.html only.
   ========================================================================= */
@media only screen and (max-width:799px){

  /* ── Demographic info panel + the 2 CTA buttons ──────────────────────
     Desktop markup: .exportHeader{display:table} with three .divTD
     {display:table-cell; width:33%} children. On a phone this crams
     3 columns into one row and pushes the 3rd column (the buttons)
     off the right edge of the viewport instead of wrapping.
     Fix: stack the three .divTD blocks vertically. The buttons are
     already the 3rd/last .divTD in the DOM, so simply stacking puts
     them below the info automatically — no markup reorder needed. ── */
  .exportHeader{
    display:block;
    width:100%;
  }
  .exportHeader .divTD{
    display:block;
    width:100% !important;
    float:none !important;
    text-align:left !important;
    vertical-align:top !important;
    box-sizing:border-box;
  }

  /* Some popups (planExport_*.html) wrap the button in a bare <a href="#">
     with the .blueButton class on an inner <div> instead of the anchor
     itself. The base button rule above already makes that inner <div>
     full-width/flex; this just makes sure the wrapping anchor doesn't
     stay inline and pinch the button's available width.            */
  .exportHeader .divTD > a{
    display:block !important;
    width:100% !important;
    text-decoration:none !important;
  }

  /* Info blocks (zip/county/state + proposal/agent): light card so the
     two groups of facts are visually separated and easy to scan.    */
  .exportHeader .divTD:nth-child(1),
  .exportHeader .divTD:nth-child(2){
    background:#f7fafd;
    border:1px solid #d8e2ec;
    border-radius:8px;
    padding:.75em .9em;
    margin-bottom:.6em;
    font-size:1em;
    line-height:1.7;
  }
  .exportHeader .divTD p{ margin:0; }

  /* CTA button block: already last in DOM (lands below the info cards).
     Buttons themselves are made full-width/flex by Section 11's
     .pad25 .blueButton rule and Section 1's base button rule above —
     no extra width override needed here, just spacing + alignment.  */
  .exportHeader .divTD:last-child{
    margin-top:.2em;
  }
  .exportHeader .divTD:last-child br.clear{ display:none; }

  /* ── Covered-individuals table (table.exportDemoTable) ───────────────
     5 columns (Covered Individuals / Gender / Age / DOB / Tobacco) is
     unreadable squeezed into a phone width. Convert each person row
     into a labelled card, readable down to 360px. TR carries ZERO
     padding throughout — TD carries all spacing — so there is no gap
     between a cell's background and the card edge.                  ── */
  .exportDemoTable{
    display:block;
    width:100% !important;
    background:none !important;
    border-spacing:0;
  }
  .exportDemoTable tbody{ display:block; width:100%; }

  /* Hide the desktop column-heading row */
  .exportDemoTable tr:first-child{ display:none; }

  /* Each data row → card. TR padding:0 — see file header note. */
  .exportDemoTable tr:not(:first-child){
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.3em .75em;
    padding:0 !important;
    border:1px solid #c5d9ef;
    border-radius:8px;
    margin:0 0 .6em;
    box-sizing:border-box;
    background:#fff !important;
  }

  /* Each cell → labelled block; TD carries all spacing */
  .exportDemoTable td{
    display:block;
    padding:.65em .8em !important;
    text-align:left !important;
    border:0 !important;
    background:none !important;
    font-size:1em;
    width:auto !important;
  }
  .exportDemoTable td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:.78em;
    font-weight:700;
    color:#005dab;
    text-transform:uppercase;
    letter-spacing:.02em;
    margin-bottom:.15em;
  }

  /* Name cell ("Applicant"/"Spouse"/"Dependent 1"/"Dependent 2")
     spans both columns and sits above the 4 detail cells.           */
  .exportDemoTable td[data-label="Covered Individuals"]{
    grid-column:1 / -1;
    border-bottom:1px dotted #c5d9ef;
    padding-bottom:.5em !important;
  }
  .exportDemoTable td[data-label="Covered Individuals"] strong{
    font-size:1.05em;
  }
}

@media only screen and (max-width:360px){
  /* Single-column card at the narrowest width */
  .exportDemoTable tr:not(:first-child){
    grid-template-columns:1fr;
  }
}


/* =========================================================================
   10. Plan Tier badges — circle → pill
       Popups render the "Plan Tier" row using theme.css's .bronzeMedal /
       .silverMedal / .goldMedal classes, which are fixed 3.8em circles
       sized for a full desktop column. These popups never load
       quoteResults.css (where the pill-shaped .tierBadge system already
       lives for the planTile cards), so on mobile the circles are
       reproduced here as pills, matching that established look.
       Adapted from quoteResults.css's .tierBadge / .tierBadge--* rules.
   ========================================================================= */
@media only screen and (max-width:799px){

  .bronzeMedal,
  .silverMedal,
  .goldMedal,
  .platinumMedal,
  .catastrophicMedal{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    height:auto;
    min-width:5.4em;
    padding:.55em 1.1em;
    border-radius:1.6em;
    margin:.3em auto;
    line-height:1.2;
    font-weight:600;
    font-size:.92em;
    text-align:center;
    vertical-align:middle;
  }

  .bronzeMedal      { background:#da8a57; color:#2b1d0e; }
  .silverMedal      { background:#cccccc; color:#222222; }
  .goldMedal        { background:#e3ab4d; color:#2b1d0e; }
  .platinumMedal    { background:#b6c0cc; color:#1d2733; }
  .catastrophicMedal{ background:#000000; color:#ffffff; }
}