/* ------------------ BAR CONTAINER ------------------ */
html,body{margin:0;padding:0;overflow-x:hidden;}

#sfaCard {
  position:fixed; left:0; right:0; bottom:-160px;
  z-index:10000; opacity:0;
  transition: bottom .35s, opacity .35s;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 0px 2px 0px; height:130px;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 0px 10px 0px rgba(0, 0, 0, .15);
}
#sfaCard.show { bottom:0; opacity:1; }

/* ------------------ CLOSE BUTTON ------------------ */
#sfaCard .close {
  position:absolute; top:2px; right:8px;
  width:26px; height:26px; min-width:26px;
  border:none; border-radius:50%;
  background:#222222; color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:0; cursor:pointer;
  transition: background .2s;
}
#sfaCard .close:hover { 
    background:#F90303;
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* ------------------ TITLE ------------------ */
#sfaCard .title {
  margin:0;
  font:700 18px/1.2 system-ui,Arial,sans-serif;
  text-align:center; pointer-events:none; color:#000;
}
.title-mob  { display:none; }
.title-desk { display:inline; }
@media (max-width:1060px){
  .title-desk{ display:none; }
  .title-mob { display:inline; }
}

/* ------------------ CARD STRIP ------------------ */
#sfaCard .card-wrap {
  display:flex; justify-content:center; gap:16px;
  width:100%; max-width:1360px; padding:0 12px; height:110px;
  margin-top: 5px;
  overflow:visible;
}

/* -------- GLASS CARD -------- */
#sfaCard .sfa-card {
  flex:0 1 375px; max-width:375px; min-height:72px;
  display:flex; align-items:center; overflow:hidden;
  border:1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius:8px;
  box-shadow:
    inset 0 0 2px rgba(255,255,255,0.1),
    0 6px 18px rgba(0,0,0,0.30);
  transition: transform .18s, box-shadow .18s;
}
#sfaCard .sfa-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      inset 0 0 2px rgba(255,255,255,0.15),
      0 8px 22px rgba(0,0,0,0.35);
}

/* -------- LOGO -------- */
#sfaCard .logo {
  width:64px; height:64px; margin:0 8px;
  background:#e0e4e8; border-radius:4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.06);
  flex:0 0 64px;
}

/* --- Fix 1px aliasing issue top of logo images --- */
#sfaCard .logo {
  background:white;
  padding-top: 2px;   /* hides that one-pixel artifact */
}
#sfaCard .logo img {
  display:block;
  margin-top:-2px;    /* pull the actual art back up */
}

/* -------- INFO COLUMN (JSclamped) -------- */
#sfaCard .info {
  flex:1; min-width:0; padding-right:8px;
}
/* singleline ellipsis on <h4> */
#sfaCard .info h4 {
  margin:0 0 2px;
  font:700 13px/1.15 system-ui,Arial;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* allow JS to inject -webkit-line-clamp dynamically */
#sfaCard .info p {
  margin:0;
  font:700 15px/1.2 system-ui,Arial;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* accent + small styling */
#sfaCard .info p .accent { color:#009EFF; }
#sfaCard .info small     { font-size:11px; opacity:.7; }

/* ------------------ ARROW DISK ------------------ */
#sfaCard .arrow {
  width:36px; height:36px; min-width:36px; margin:0 8px 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#F90303; border:none; border-radius:50%;
  cursor:pointer; transition: background .2s, transform .2s;
}
#sfaCard .arrow .glyph {
  font-size:28px; color:#FFFFFF;
}
#sfaCard .arrow:hover {
    transform: scale(1.05);
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}


/* ------------------ MOBILE ------------------ */
@media(max-width:1060px){
  #sfaCard .card-wrap .sfa-card:nth-child(n+2) { display:none; }
  #sfaCard .card-wrap { justify-content:center; }
}

/* wrap entire card in <a> */
#sfaCard .sfa-card-link {
  display:flex; width:100%; height:100%;
  text-decoration:none; color:inherit;
}
#sfaCard .sfa-card-link .sfa-card {
  width:100%; height:100%;
}


/* Glyph hover effects */
#sfaCard .arrow:hover {
    background: #FFFFFF;
  }
  #sfaCard .arrow:hover .glyph {
    color: #F90303;
}






/* ---------- CSS for 'More' popover (anchored), brand colors #009EFF & #F90303 ---------- */

/* Truncated fine print + trigger */
.cau_sf_disclaimer{
  display:flex;
  align-items:baseline;
  gap:.35em;
  width:100%;
  position:relative; /* for negative margin overlap on "More..." */
}

.cau_sf_text{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.85rem;
  line-height:1.4;
  opacity:.9;
}

/* "More" looks like the <small> text, just bold; JS toggles display */
.cau_sf_more{
  flex:none;
  display:none;              /* shown only if truncated */
  cursor:pointer;
  white-space:nowrap;
  font-size:.85rem;          /* match .cau_sf_text */
  line-height:1.4;
  color:inherit;             /* same color as fine print */
  opacity:.9;                /* match .cau_sf_text */
  text-decoration:none;      /* no underline */
  font-weight:600;           /* bold only */
  margin-right:-45px;        /* reveal more text space */
  position:relative;         /* keep above underlying text */
  z-index:1;
}
/* Remove focus ring specifically for "More..." */
.cau_sf_more:focus,
.cau_sf_more:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.cau_sf_more::-moz-focus-inner{ border:0; } /* Firefox */

/* Popover container + tunables for layout */
.cau_sf_popover{
  /* variables to compute reserved space for the close btn (first 2 lines only) */
  --cau-pop-close-size: 24px;   /*  button size */
  --cau-pop-close-right: 10px;  /* right offset of  from inner edge */
  --cau-pop-gap: 8px;           /* desired visible gap next to  */
  --cau-pop-pr: 16px;           /* container padding-right */
  --cau-reserve: calc(var(--cau-pop-close-size) + var(--cau-pop-close-right) + var(--cau-pop-gap) - var(--cau-pop-pr));

  position:absolute;
  z-index:100000;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  /* small right padding; extra space is reserved only for the first two lines via ::before */
  padding:18px var(--cau-pop-pr) 14px 16px; /* top | right | bottom | left */
  max-width:360px;
  width:max-content;
  min-width:220px;
  font-size:.95rem;
  line-height:1.35;
}

/* Brand accent bar */
.cau_sf_popover::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(90deg,#009EFF,#F90303);
}

/* Body text  only first two lines reserve space for the close btn */
.cau_sf_popover_body{
  white-space:normal;
  color:#111;
  padding-top:4px;        /* space below accent bar */
  line-height:1.4;        /* your requested line-height */
  position:relative;
}
.cau_sf_popover_body::before{
  content:"";
  float:right;
  pointer-events:none;                 /* < never block clicks */
  width: calc(max(0px, var(--cau-reserve)) + 2px); /* small fudge for safety */
  height: calc(2 * 1.4em + 2px);       /* reserve ~2 lines (matches line-height above) */
}

/* Close button  exact hit box, on top */
.cau_sf_popover_close{
  position:absolute;
  top:10px;
  right:10px;
  width:24px;
  height:24px;
  display:inline-flex;                 /* center the  without line-height hacks */
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:#666;
  font-size:18px;
  line-height:1;                       /* irrelevant with inline-flex, keep tidy */
  cursor:pointer;
  border-radius:6px;
  z-index:2;                           /* < above any floats */
}
.cau_sf_popover_close:hover{ background:rgba(0,0,0,.05); }
.cau_sf_popover_close:focus{ outline:2px solid #009EFF; outline-offset:2px; }

/* Arrow */
.cau_sf_popover_arrow{
  position:absolute;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:#fff;
  border-left:1px solid rgba(0,0,0,.12);
  border-top:1px solid rgba(0,0,0,.12);
}
.cau_sf_popover[data-placement="bottom"] .cau_sf_popover_arrow{ top:-7px; }
.cau_sf_popover[data-placement="top"] .cau_sf_popover_arrow{
  bottom:-7px;
  transform:rotate(225deg);
}