@charset "utf-8";
/* =========================================================================
   quoteResults.css  (v3)
   Vertical plan-result tiles for the CBC / Costco Quote results pages.
   Loaded at ALL resolutions (after theme.css). New .planTile* / .cqFeat*
   class names so nothing collides with the legacy theme.css layout used by
   the other results pages.

   v3 changes:
   - hex colours only (no CSS custom properties)
   - links / plan names back to #006FDB
   - "Add to Cart" is a full-width button at the very bottom, below the
     Compare Plan + Plan Details row
   - Preferred-plan banner classes renamed (cqFeat*) so theme.css's
     absolutely-positioned .featuredTab no longer hijacks it
   ========================================================================= */

/* Screen-reader-only helper (ADA) */
.srOnly{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ----- Grid of tiles ----- */
.planTiles{
  list-style:none;margin:0 1em 1em 1em;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(21em,1fr));
  gap:1.5em;align-items:stretch;
}
.planTiles > .planTile{ display:flex; margin:0; }

/* ----- Tile shell ----- */
.planTileInner{
  position:relative;display:flex;flex-direction:column;width:100%;
  background:#fff;border:1px solid #005dab;border-radius:8px;
  box-sizing:border-box;overflow:hidden;
  font-family:'Costco Sans Micro','apple-system','BlinkMacSystemFont','Segoe UI','Roboto',sans-serif;
  color:#222222;font-size:1em;
}
.planTile--current  .planTileInner{ border:.18em solid #2773b6; }
.planTile--featured .planTileInner{ border:.2em solid #DE2127; }

/* ======================= Badge ribbons ======================= */
.planTileBadge{ margin:0; font-weight:600; }

/* Current plan: solid blue bar, white text (4.98:1) */
.planTileBadge--current{
  display:flex;align-items:center;
  padding:.6em 1.125em;background:#2773b6;
  color:#fff;font-size:1em;text-transform:uppercase;letter-spacing:.02em;
}
/* Current plan: solid red bar, white text (4.98:1) */
.planTileBadge--current--featured{
  display:flex;align-items:center;
  padding:.6em 1.125em;background:#DE2127;
  color:#fff;font-size:1em;text-transform:uppercase;letter-spacing:.02em;
}

/* Preferred plan: red bar with a white Costco "tab" + red stars.
   Renamed classes (cqFeat*) to avoid theme.css .featured* collisions. */
.planTileBadge--featured{
  display:flex;align-items:stretch;
  padding:0;background:#DE2127;
}
.cqFeatTab{
  display:inline-flex;
  flex-wrap: wrap;	
  align-items:center;gap:.6em;
  background:#fff;padding:.45em .9em .45em 1.125em;
  width:100%;
}
.cqFeatLogo{
  display:inline-block;width:7em;height:1.85em;flex:0 0 auto;
  background:url(images/FeaturedCostcoLogo.png) no-repeat left center/contain;
}
.cqFeatText{
  color:#005dab;font-weight:600;font-size:1.02em; margin-left:.5em;
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;
}
.planTileStars{ display:inline-flex; gap:.06em; }
.planTileBadge--featured .planTileStars i{ color:#DE2127; font-size:1.05em; }

/* ======================= Header ======================= */
.planTileHead{ padding:1em 1.125em 1.05em; border-bottom:1px dotted #97c2f1; }

/* Larger carrier logos */
.planTileLogo{ min-height:3em; margin-bottom:.6em; display:flex; align-items:center; }
.planTileLogo img{ max-height:3.4em; max-width:15em; width:auto; height:auto; display:block; }
.planTileCarrierName{ font-size:1.55em; line-height:1.05; color:#444; margin:0 0 .4em; }

.planTileName{
  margin:.1em 0 .65em;font-size:1.3em;font-weight:600;line-height:1.2;
  color:#006FDB;
}

.planTileTopMeta{ display:flex; align-items:flex-end; gap:.9em; flex-wrap:wrap; }

/* Tier "grade" badge */
.tierBadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:5.4em;padding:.75em 1.25em;border-radius:1.6em;
  font-weight:600;font-size:1em;color:#222222;
}
.tierBadge--bronze      { background:#da8a57;  color:#2b1d0e; }
.tierBadge--silver      { background:#cccccc;  color:#222222; }
.tierBadge--gold        { background:#e3ab4d;  color:#2b1d0e; }
.tierBadge--platinum    { background:#b6c0cc;  color:#1d2733; }
.tierBadge--catastrophic{ background:#000000;  color:#ffffff; }

/* Prominent monthly premium */
.planTilePrice{ margin-left:auto; text-align:right; line-height:1; }
.planTilePriceLabel{
  display:block;font-size:.85em;text-transform:uppercase;letter-spacing:.03em;
  color:#595959;margin-bottom:.2em;
}
.planTilePriceValue{ font-weight:bold; font-size:2.2em; color:#005dab; white-space:nowrap; }
.planTilePriceValue .cur{ font-size:.48em; font-weight:normal; vertical-align:.85em; }
.planTilePriceValue .per{ font-size:.45em; font-weight:normal; color:#595959; }

/* ======================= Specs ======================= */
.planTileSpecs{
  margin:0;padding:.95em 1.125em;display:grid;grid-template-columns:1fr 1fr;gap:.85em 1.25em;
}
.planSpec{ display:flex; flex-direction:column; min-width:0; }
.planSpec dt{
  font-size:.9em;text-transform:uppercase;letter-spacing:.02em;
  color:#595959;margin-bottom:.12em;
}
.planSpec dd{ margin:0; font-weight:600; font-size:1.05em; color:#222222; }
.planSpec dd .per{ font-size:.7em; font-weight:normal; color:#595959; }
.planSpec--wide{ grid-column:1 / -1; }

/* ======================= Contribution / summary line ======================= */
.planTileContrib{
  margin:0;padding:.7em 1.125em;border-top:1px dotted #97c2f1;
  font-size:.95em;color:#595959;line-height:1.5;
}
.planTileContrib a{ color:#006FDB; }
.planTileContrib .sep{ color:#595959; padding:0 .4em; }
.planTileContrib .fa{ color:#006FDB; }

/* ======================= Quick links ======================= */
.planTileLinks{
  display:flex;flex-wrap:wrap;gap:.4em 1.1em;
  padding:.7em 1.125em;border-top:1px dotted #97c2f1;font-size:1em;
}
.planTileLinks a{ color:#006FDB; text-decoration:none; display:inline-flex; align-items:center; gap:.3em; }
.planTileLinks a:hover,.planTileLinks a:focus{ text-decoration:underline; }
.planTileLinks .fa{ color:#006FDB; }

/* ======================= Actions row (Compare + Plan Details) ======================= */
.planTileActions{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1em;padding:.9em 1.125em;background:#f7fafd;border-top:1px solid #d8e2ec;
}
.planTileCompare{ display:flex; align-items:center; gap:.5em; }
.planTileCompare input[type="checkbox"]{ width:1.25em; height:1.25em; flex:0 0 auto; }
.planTileCompare label{ font-size:1em; color:#222222; cursor:pointer; }
.planTileDetails{
  display:inline-flex;align-items:center;gap:.35em;
  color:#006FDB;font-weight:600;text-decoration:none;font-size:1em;
}
.planTileDetails:hover,.planTileDetails:focus{ text-decoration:underline; }
.planTileDetails .fa{ color:#006FDB; }

/* ======================= Add to Cart (full width, very bottom) ======================= */
.plantilebottom{background:#f7fafd;}
.planTileAdd{
  display:flex;align-items:center;justify-content:center;gap:.55em;
  margin:.1em 1.125em 1.125em;min-height:48px;
  padding:.7em 1.1em;box-sizing:border-box;
  background:#005dab;border:1px solid #005dab;border-radius:8px;
  color:#fff;font-family:'Costco Sans Micro','apple-system','BlinkMacSystemFont','Segoe UI','Roboto',sans-serif;
  font-weight:600;font-size:1.18em;line-height:1;text-decoration:none;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.planTileAdd img{ display:block; }
.planTileAdd:hover,
.planTileAdd:focus{ background:#c41a20; border-color:#c41a20; color:#fff; }

/* ======================= Visible keyboard focus (ADA) ======================= */
.planTileAdd:focus-visible,
.planTileLinks a:focus-visible,
.planTileContrib a:focus-visible,
.planTileDetails:focus-visible,
.planTileCompare input:focus-visible{
  outline:3px solid #ffbf47; outline-offset:2px; border-radius:4px;
}

/* =========================================================================
   DETAIL-PAGE TILE  (single plan tile used on the *PlanDetails pages)
   The tile is laid out HORIZONTALLY at >=900px (logo/name | specs | price)
   and collapses to the standard VERTICAL tile below 900px.
   These rules live here (loaded at ALL widths, after theme.css) rather than
   in mobile.css so the 900px transition is honoured in the 800-899px range
   where mobile.css (max-width:799px) is not loaded.
   ========================================================================= */
.planTileDetail{ margin:0 0 1.5em; }
.planTileDetail .planTile{ display:flex; }
.planTileDetail .planTileInner{ width:100%; }

/* Network-providers / disclaimer links sit directly under the plan name */
.planTile--detail .planTileHead .planTileLinks{
  border-top:none; padding:.55em 0 0; gap:.35em .9em;
}

/* Right-hand price + CTA column */
.planTilePriceCol{
  display:flex; flex-direction:column;
  padding:.85em 1.125em 1.125em; box-sizing:border-box;
  border-top:1px dotted #97c2f1;
}
.planTilePriceCol .planTilePrice{ margin:0; text-align:center; }
.planTilePriceCol .planTileAdd{ margin:.7em 0 0; }

.planTileTaxCredit{
  display:flex; align-items:center; justify-content:center; gap:.35em;
  margin:0 0 .45em; font-weight:600; font-size:.95em; color:#005dab; line-height:1.2;
}
.planTileTaxCredit .fa{ color:#005dab; }

.planTileOldPrice{
  display:block; margin-top:.2em;
  font-size:1.05em; color:#767676; text-decoration:line-through;
}
.planTileOldPrice .cur{ font-size:.6em; vertical-align:.55em; }
.planTileOldPrice .per{ font-size:.6em; }

/* Small parenthetical note inside a spec value (e.g. "(10 days per year)") */
.planSpec dd .note{ display:inline-block; font-weight:normal; font-size:.8em; color:#595959; }

/* ---- Horizontal layout from 900px up ---- */
@media only screen and (min-width:900px){
  .planTile--detail .planTileInner{
    flex-direction:row; flex-wrap:nowrap; align-items:stretch;
  }
  .planTile--detail .planTileHead{
    flex:0 0 25%; box-sizing:border-box;
    display:flex; flex-direction:column; justify-content:center;
    border-bottom:none; border-right:1px dotted #97c2f1;
  }
  .planTile--detail .planTileSpecs{
    flex:1 1 auto; align-content:center;
    border-right:1px dotted #97c2f1;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .planTile--detail .planTilePriceCol{
    flex:0 0 23%; box-sizing:border-box;
    justify-content:center; border-top:none;
  }
}


/* =========================================================================
   SMALL-GROUP "COSTCO PREFERRED" EXECUTIVE PLAN  (SmallGroups_*Results)
   Extra elements layered onto a .planTile--featured tile:
     .cqExecSave          - red "save up to 5%" banner under the badge
     .planTilePrice--exec - stacked Total / Executive-discounted prices
     .execFn              - superscript "1" footnote marker on the price
     .planTilePriceNote   - the "Price Note" line near the tile bottom
   Loaded at ALL widths (after theme.css) so it applies on desktop + mobile.
   ========================================================================= */
.cqExecSave{
  margin:0; padding:.55em 1.125em;
  background:#DE2127; color:#fff;
  font-size:.98em; line-height:1.35; font-weight:600;
}
.cqExecSave strong{ font-weight:700; }

/* Stacked price column for the Executive tile */
.planTilePrice--exec{ display:flex; flex-direction:column; align-items:flex-end; }
.planTilePriceLabel--exec{ color:#DE2127; font-weight:700; margin-top:.25em; }
.planTilePrice--exec .planTileOldPrice{
  margin:0; font-size:1.15em; color:#767676; text-decoration:line-through;
}
.planTilePrice--exec .planTileOldPrice .cur{ font-size:.6em; vertical-align:.55em; }
.planTilePrice--exec .planTileOldPrice .per{ font-size:.6em; }
.planTilePriceValue .execFn{
  font-size:.5em; font-weight:bold; vertical-align:.95em;
  color:#DE2127; margin-left:.05em;
}

/* "Price Note" row near the bottom of the Executive tile */
.planTilePriceNote{
  margin:0; padding:.65em 1.125em;
  border-top:1px dotted #97c2f1;
  font-size:.9em; color:#595959; line-height:1.45;
}
.planTilePriceNoteLabel{
  display:inline-block; margin-right:.45em;
  font-weight:700; color:#DE2127;
  text-transform:uppercase; letter-spacing:.02em;
}