/* ===========================================================================
   Filix — SHELL stylesheet (top bar, page-title bar, footer, ad popups)
   ---------------------------------------------------------------------------
   This file is deliberately loaded AFTER each tool's own <style> block so the
   site chrome always wins. Nothing a tool ships can repaint the header, the
   page-title strip or the footer.
   =========================================================================== */

/* ---- tool pages: neutralise the layout each standalone tool brought with it */
body{display:block!important;height:auto!important;min-height:0!important;
  overflow-y:visible!important;margin:0!important;padding:0!important;
  background:var(--bg)!important;color:var(--txt);font-family:var(--font);
  /* the ad popups park just off each edge; clip sideways so parking cannot
     give the page a horizontal scrollbar. clip beats hidden here because it
     does not turn <body> into a scroll container. */
  overflow-x:hidden!important;overflow-x:clip!important}
.tool-head{display:none!important}
.tool-foot{display:none!important}
.fx-bar{max-width:1180px;margin:18px auto -6px;padding:0 20px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:flex-end;gap:10px}
.fx-bar:empty{display:none}
/* controls lifted out of a tool's own header keep working and stay legible
   even when the tool's chrome CSS no longer applies to them */
.fx-bar>*{margin:0}
.fx-bar .pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:6px 13px}
.fx-bar .pill .dot{width:8px;height:8px;border-radius:50%;background:#c3d1e0;display:block;flex:none}
.fx-bar .pill .dot.on{background:var(--ok)}
.fx-bar .steps{display:flex;flex-wrap:wrap;gap:8px}

/* ------------------------------------------------------------- top bar --- */
.f-top{background:linear-gradient(135deg,var(--bar-head),var(--bar-head-2));color:#fff;
  border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:200;
  box-shadow:0 2px 14px rgba(0,0,0,.14)}
.f-tin{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;
  min-height:62px;position:relative}
.f-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:none;padding:9px 0}
.f-logo{width:40px;height:40px;border-radius:10px;background:var(--red);display:grid;place-items:center;
  font-weight:800;font-size:17px;color:#fff;flex:none}
.f-logo-full{width:auto;display:block}
.f-bt{line-height:1.15}
.f-bt b{display:block;font-size:19px;font-weight:800;letter-spacing:.2px;color:#fff}
.f-bt b i{font-style:normal;color:var(--gold)}
.f-bt small{display:block;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:#bcd6ef}

.f-nav{margin-left:auto;display:flex;align-items:center;gap:10px}
.f-menu{list-style:none;display:flex;align-items:center;gap:2px}
.f-menu>li{position:relative}
.f-menu>li>a,.f-parent{display:flex;align-items:center;gap:6px;color:#e3eefa;text-decoration:none;
  font-size:13px;font-weight:600;padding:19px 11px;white-space:nowrap;background:none;border:0;
  font-family:inherit;cursor:pointer;transition:.15s;position:relative}
.f-menu>li>a:hover,.f-parent:hover{color:#fff}
.f-menu>li>a.on,.f-menu>li.on>.f-parent{color:#fff}
.f-menu>li>a.on::after,.f-menu>li.on>.f-parent::after{content:"";position:absolute;left:11px;right:11px;
  bottom:0;height:3px;background:var(--gold);border-radius:3px 3px 0 0}
.cev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s;opacity:.75}
.has-sub:hover .cev,.has-sub.open .cev{transform:rotate(180deg)}

/* ---- mega panels -------------------------------------------------------
   Every group opens as a grid rather than a single column, so a long group
   (PDF Tools) is a short wide panel instead of a list that runs off the
   bottom of the screen. The panel is positioned against .f-tin, and the
   script in footer.php slides it left so it can never overflow the page.
   Without that script it simply sits at the left edge of the bar.        */
.f-menu>li.has-sub{position:static}
.f-sub{position:absolute;top:100%;left:0;background:#fff;border-radius:0 0 15px 15px;
  box-shadow:0 22px 50px rgba(0,32,66,.24);padding:13px 14px 14px;opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:.18s;border-top:3px solid var(--gold);
  max-width:calc(100vw - 24px)}
.has-sub:hover .f-sub,.has-sub.open .f-sub{opacity:1;visibility:visible;transform:translateY(0)}

.f-mhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:0 6px 9px;margin-bottom:8px;border-bottom:1px solid #e7edf5}
.f-mhead b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary)}
.f-mhead span{font-size:11px;color:var(--muted);white-space:nowrap}

/* fixed tracks, not 1fr: the panel shrink-wraps its contents, and a flexible
   track would stretch it to fit the longest description on a single line */
.f-mgrid{display:grid;grid-template-columns:repeat(var(--cols,2),272px);gap:1px 8px}

.f-sub a{display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:9px;
  text-decoration:none;color:var(--txt);transition:.13s}
.f-sub a:hover{background:#eef4fb}
.f-sub a.on{background:#e6f0fa}
.f-sub .si{width:34px;height:34px;flex:none;border-radius:9px;background:#eaf1f9;display:grid;
  place-items:center;margin-top:1px}
.f-sub .si img{max-width:18px;max-height:18px}
.f-sub .si svg{width:18px;height:18px;stroke:var(--primary);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.f-sub a:hover .si{background:var(--primary)}
.f-sub a:hover .si svg{stroke:#fff}
.f-sub .st{min-width:0}
.f-sub .st b{display:block;font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.35}
/* two lines each, so every cell in a row is the same height */
.f-sub .st small{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.f-all{flex:none;background:var(--gold);color:#221a05;font-weight:700;font-size:12.5px;
  padding:9px 16px;border-radius:8px;text-decoration:none;white-space:nowrap}
.f-all:hover{filter:brightness(1.07)}

.f-burger{display:none;flex:none;margin-left:auto;background:rgba(255,255,255,.14);border:0;
  width:42px;height:38px;border-radius:9px;cursor:pointer;padding:11px 10px}
.f-burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.22s}
.f-burger span+span{margin-top:4px}
.f-burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.f-burger.x span:nth-child(2){opacity:0}
.f-burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* with six or more menu groups the bar gets tight before it gets narrow, so
   the least important pieces go first and the burger arrives sooner */
@media(max-width:1460px){
  .f-all{display:none}
}
@media(max-width:1320px){
  .f-menu>li>a,.f-parent{font-size:12.5px;padding:19px 9px}
  .cev{width:11px;height:11px}
}
@media(max-width:1240px){
  .f-menu>li>a,.f-parent{padding:19px 7px;letter-spacing:-.1px}
  .f-bt small{display:none}
}
@media(max-width:1180px){
  .f-burger{display:block}
  .f-nav{position:absolute;top:100%;left:0;right:0;background:var(--bar-head);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 12px 16px;display:none;max-height:78vh;overflow-y:auto;
    box-shadow:0 18px 34px rgba(0,0,0,.3)}
  .f-nav.open{display:flex}
  .f-menu{flex-direction:column;align-items:stretch;gap:0}
  .f-menu>li>a,.f-parent{padding:13px 14px;font-size:15px;width:100%;justify-content:space-between;
    border-radius:9px}
  .f-menu>li>a.on::after,.f-menu>li.on>.f-parent::after{display:none}
  .f-menu>li>a.on,.f-menu>li.on>.f-parent{background:rgba(255,255,255,.14)}
  /* on a phone the panel goes back to being an accordion inside the drawer,
     one item per row; the script clears any inline left it had set */
  .f-sub{position:static;opacity:1;visibility:visible;transform:none;display:none;
    box-shadow:none;border-radius:10px;margin:2px 0 8px;border-top:0;background:rgba(255,255,255,.07);
    padding:6px;max-width:none;left:auto!important}
  .has-sub.open .f-sub{display:block}
  .has-sub:hover .f-sub{display:none}
  .has-sub.open:hover .f-sub{display:block}
  .f-mhead{display:none}
  .f-mgrid{grid-template-columns:1fr;gap:1px}
  .f-sub a{color:#dce9f7}
  .f-sub a:hover,.f-sub a.on{background:rgba(255,255,255,.12)}
  .f-sub .st b{color:#fff}
  .f-sub .st small{color:#a9c6e4}
  .f-sub .si{background:rgba(255,255,255,.14)}
  .f-sub .si svg{stroke:#fff}
  .f-all{display:block;margin-top:10px;text-align:center;padding:12px}
}

/* a narrow laptop cannot hold four columns side by side; below 1180px the
   drawer above has already taken over with a single column */
@media(min-width:1181px) and (max-width:1340px){
  .f-mgrid{grid-template-columns:repeat(min(var(--cols,2),3),248px)}
}

/* -------------------------------------------------------------- footer --- */
.f-foot{background:var(--bar-foot);color:#cbe0f4;margin-top:44px}

/* the company pages, in one horizontal row across the top of the footer */
.f-strip{max-width:1240px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:6px 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.f-strip a{color:#dbe9f7;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:5px 16px;border-radius:7px;white-space:nowrap;position:relative;transition:.15s}
.f-strip a:hover{color:#fff;background:rgba(255,255,255,.12)}
/* The thin dividers only make sense while the row is guaranteed to be a single
   line. Once it wraps, CSS cannot tell which link starts a new row, so the
   first item on the second row would get a stray leading bar — below this width
   the links simply space themselves instead. */
@media(min-width:1080px){
  .f-strip a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:13px;background:rgba(255,255,255,.22)}
  .f-strip a:hover::before,.f-strip a:hover+a::before{opacity:0}
}
@media(max-width:1079px){
  .f-strip{gap:4px 6px}
}
@media(max-width:640px){
  .f-strip{padding:12px 14px;gap:2px 4px}
  .f-strip a{font-size:12.5px;padding:5px 10px}
}
.f-fin{max-width:1240px;margin:0 auto;padding:36px 20px 0;display:grid;gap:28px 24px;
  grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
.f-fin>div:first-child{grid-column:span 2;min-width:250px}
.f-foot h4{color:#fff;font-size:13px;letter-spacing:.8px;text-transform:uppercase;margin:0 0 12px}
.f-foot p{font-size:13px;line-height:1.65;margin:0 0 8px}
.f-foot ul{list-style:none}
.f-foot li{margin-bottom:7px}
.f-foot a{color:#cbe0f4;text-decoration:none;font-size:13px}
.f-foot a:hover{color:var(--gold)}
.f-cred{border-top:1px solid rgba(255,255,255,.16);margin-top:28px;padding:15px 20px;text-align:center;
  font-size:12px;color:#a8c8e6}
.f-cred b{color:#fff}
.f-cred span{color:var(--gold);font-weight:700}
@media(max-width:520px){.f-fin{grid-template-columns:1fr}.f-fin>div:first-child{grid-column:span 1}}

/* ======================= GOOGLE AD POPUPS ================================ */
.fx-ad{position:fixed;z-index:950;background:#fff;border:0;border-radius:16px;
  box-shadow:0 22px 60px rgba(0,24,54,.28),0 2px 10px rgba(0,24,54,.10);
  padding:14px;opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .32s ease}
.fx-ad.show{opacity:1;pointer-events:auto;transform:none!important}
.fx-ad.gone{opacity:0;pointer-events:none}
.fx-ad .fx-body{overflow:hidden;border-radius:10px;min-width:120px;min-height:60px;
  display:flex;align-items:center;justify-content:center}
.fx-ad .fx-body>*{max-width:100%}
.fx-x{position:absolute;top:-11px;right:-11px;width:30px;height:30px;border-radius:50%;border:0;
  background:#0b1b2c;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 5px 16px rgba(0,20,45,.42);transition:.16s;z-index:2}
.fx-x:hover{background:var(--red);transform:rotate(90deg) scale(1.06)}
.fx-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}

/* each slot parks off its own edge, then slides in */
.fx-top   {top:80px;   left:50%;  transform:translate(-50%,-260%)}
.fx-bottom{bottom:14px;left:50%;  transform:translate(-50%,140%)}
.fx-left  {left:14px;  top:50%;   transform:translate(-140%,-50%)}
.fx-right {right:14px; top:50%;   transform:translate(140%,-50%)}
.fx-center{top:50%;    left:50%;  transform:translate(-50%,-50%) scale(.9)}
.fx-top.show   {transform:translate(-50%,0)!important}
.fx-bottom.show{transform:translate(-50%,0)!important}
.fx-left.show  {transform:translate(0,-50%)!important}
.fx-right.show {transform:translate(0,-50%)!important}
.fx-center.show{transform:translate(-50%,-50%) scale(1)!important}
.fx-center{box-shadow:0 30px 90px rgba(0,20,48,.42);z-index:960}
.fx-dim{position:fixed;inset:0;background:rgba(6,22,42,.38);backdrop-filter:blur(2px);z-index:930;
  opacity:0;pointer-events:none;transition:opacity .32s}
.fx-dim.on{opacity:1;pointer-events:auto}

@media(max-width:640px){
  .fx-left,.fx-right{left:50%;right:auto;top:auto;bottom:14px;transform:translate(-50%,140%)}
  .fx-left.show,.fx-right.show{transform:translate(-50%,0)!important}
  .fx-ad{max-width:calc(100vw - 28px)}
  .fx-center{width:calc(100vw - 28px)}
}

/* -------------------------------------------------- page title strip ------ */
/* One compact band under the site header, used by every inner page. The trust
   badges sit in their own column on the right so they add no height at all on
   a desktop screen. */
.pagehead{background:linear-gradient(135deg,var(--bar-head),var(--bar-head-2));color:#fff;
  padding:15px 20px 17px}
.pagehead .in{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;
  justify-content:space-between;gap:18px 26px;flex-wrap:wrap}
.pagehead .ph-main{flex:1 1 420px;min-width:0}
.pagehead h1{font-size:clamp(19px,2.45vw,26px);font-weight:800;letter-spacing:-.3px;line-height:1.22}
.pagehead p{color:#c3d5e8;font-size:13.5px;line-height:1.5;margin-top:4px;max-width:78ch}
.crumbs{font-size:11.5px;color:#9fb4cf;margin-bottom:4px;line-height:1.4}
.crumbs a{color:#9fb4cf;text-decoration:none}
.crumbs a:hover{color:var(--gold)}

.pagehead .badges{flex:0 1 auto;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;
  margin-top:2px;max-width:100%}
.pagehead .badges span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#e8f1fa;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  padding:4px 10px;border-radius:99px;white-space:nowrap}
.pagehead .badges span i{width:5px;height:5px;border-radius:50%;background:#3ddc97;display:block;flex:none}

@media(max-width:900px){
  .pagehead .in{gap:10px}
  .pagehead .badges{justify-content:flex-start;order:3;flex-basis:100%}
}
@media(max-width:640px){
  .pagehead{padding:13px 16px 15px}
  .pagehead p{font-size:12.8px}
  .pagehead .badges span{font-size:10px;padding:3px 9px}
}

/* ---------------------------------------------------------- icon fonts ---- */
/* Flaticon UIcons / Font Awesome glyphs chosen in the admin panel. */
.fx-i{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.tool .ic .fx-i{font-size:25px;color:var(--navy)}
.tool:nth-child(even) .ic .fx-i{color:var(--red)}
.f-sub .si .fx-i{font-size:17px;color:var(--primary)}
.f-sub a:hover .si .fx-i{color:#fff}