/* ==========================================================================
   The account / Pro modal and the in-page wall (pass 79, includes/browse.php).

   The overlay is a .qm-ov, so it inherits the RFQ modal's overlay rules in
   design-system.css and the site chrome treats it like any other modal: it is
   moved to <body> and the header steps away while it is open. Everything below
   styles the card inside it, and the wall printed in place of search results.
   Restated here (not only in design-system.css) for pages that dequeue it.
   ========================================================================== */
.ffpw-ov{display:none;position:fixed;inset:0;z-index:500;background:rgba(5,13,24,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:20px}
.ffpw-ov.open{display:flex}
.ffpw-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 40px);overflow:auto;
  padding:30px 28px 24px;border-radius:20px;text-align:left;
  background:linear-gradient(180deg,#0E2137 0%,#0A1828 100%);
  border:1px solid rgba(127,192,242,.18);box-shadow:0 30px 80px -24px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.02) inset;
  animation:ffpwIn .28s cubic-bezier(.34,1.3,.64,1) both}
.ffpw-card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,transparent,rgba(82,222,181,.55),transparent)}
@keyframes ffpwIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.ffpw-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(127,192,242,.2);
  background:transparent;color:#9BBFD8;font-size:20px;line-height:1;cursor:pointer;transition:background-color .18s,color .18s}
.ffpw-x:hover,.ffpw-x:focus-visible{background:rgba(127,192,242,.1);color:#fff}
.ffpw-x:focus-visible{outline:2px solid #8DCAF2;outline-offset:2px}
.ffpw-ico{display:block;width:44px;height:44px;border-radius:12px;margin-bottom:16px;
  background:rgba(82,222,181,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352DEB5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.6 3.8-5.6 7.2-5.6s6.3 2 7.2 5.6'/%3E%3C/svg%3E") center/22px no-repeat;
  border:1px solid rgba(82,222,181,.28)}
.ffpw-h{margin:0 0 8px;padding-right:28px;font:800 21px/1.25 'Plus Jakarta Sans','Inter',system-ui,sans-serif;color:#F2F8FD;letter-spacing:-.01em;text-wrap:balance}
.ffpw-p{margin:0 0 18px;font:400 14px/1.6 'Inter',system-ui,sans-serif;color:#B5CDE0}
.ffpw-acts{display:flex;flex-wrap:wrap;gap:10px}
.ffpw-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;padding:11px 16px;border-radius:11px;
  font:600 14px/1.2 'Inter',system-ui,sans-serif;text-decoration:none;color:#D8E9F6;border:1px solid rgba(127,192,242,.32);
  transition:transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s,background-color .18s}
.ffpw-btn:hover,.ffpw-btn:focus-visible{background:rgba(127,192,242,.08);transform:translateY(-1px)}
.ffpw-btn.pri{color:#04211A;background:#52DEB5;border-color:#52DEB5}
.ffpw-btn.pri:hover,.ffpw-btn.pri:focus-visible{background:#6BE7C3;box-shadow:0 10px 26px -12px rgba(82,222,181,.75)}
.ffpw-btn:focus-visible{outline:2px solid #E6F2FB;outline-offset:2px}
.ffpw-pro{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(127,192,242,.12);
  font:400 12.5px/1.55 'Inter',system-ui,sans-serif;color:#9BBFD8}
.ffpw-pro-tag{flex-shrink:0;font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 7px;border-radius:6px;color:#F5C877;border:1px solid rgba(245,200,119,.4);background:rgba(245,200,119,.06)}

/* The wall (pass 80, §7): under the last card a viewer may see. Three teaser
   cards - drawn shapes, never listings - blurred behind the copy, so the grid
   visibly carries on without any of it being readable. */
.ffpw-wall{position:relative;max-width:1180px;margin:22px auto 36px;padding:0 0 4px;text-align:center;isolation:isolate}
.ffpw-teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;filter:blur(7px);opacity:.55;
  pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%)}
.ffpw-tc{display:flex;flex-direction:column;gap:12px;height:210px;padding:20px;border-radius:16px;
  background:rgba(18,34,52,.7);border:1px solid rgba(127,192,242,.14)}
.ffpw-tc i{display:block;border-radius:6px;background:rgba(127,192,242,.18)}
.ffpw-tc-a{width:44px;height:44px;border-radius:12px!important}
.ffpw-tc-b{width:72%;height:14px}
.ffpw-tc-c{width:48%;height:10px}
.ffpw-tc-d{margin-top:auto;width:100%;height:34px;border-radius:10px!important}
.ffpw-wall-in{position:relative;max-width:560px;margin:-150px auto 0;padding:30px 28px;border-radius:18px;
  background:linear-gradient(180deg,rgba(14,33,55,.94),rgba(10,24,40,.96));border:1px solid rgba(127,192,242,.2);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.6)}
.ffpw-wall .ffpw-ico{margin:0 auto 14px}
.ffpw-wall .ffpw-h{padding-right:0}
.ffpw-wall .ffpw-acts{justify-content:center}
.ffpw-wall .ffpw-btn{flex:0 1 auto;min-width:170px;min-height:44px;white-space:nowrap}
.ffpw-sub{margin:14px 0 0;font:500 13px/1.5 'Inter',system-ui,sans-serif;color:#9FB8CC}
.ffpw-sub a{color:#7FC0F2;text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){.ffpw-teasers{grid-template-columns:repeat(2,minmax(0,1fr))}.ffpw-tc:nth-child(3){display:none}}
@media (max-width:640px){.ffpw-teasers{grid-template-columns:1fr}.ffpw-tc:nth-child(2){display:none}
  .ffpw-wall-in{margin-top:-120px;padding:24px 18px}.ffpw-wall .ffpw-btn{min-width:0;flex:1 1 100%}}

/* Light mode */
body.light-mode .ffpw-ov{background:rgba(219,233,247,.78)}
body.light-mode .ffpw-card,body.light-mode .ffpw-wall-in{background:#FFFFFF;border-color:rgba(30,107,171,.18);
  box-shadow:0 30px 70px -28px rgba(10,40,70,.35),0 2px 6px rgba(10,40,70,.06)}
body.light-mode .ffpw-card::before{background:linear-gradient(90deg,transparent,rgba(15,155,114,.5),transparent)}
body.light-mode .ffpw-x{color:#47687D;border-color:rgba(30,107,171,.22)}
body.light-mode .ffpw-x:hover,body.light-mode .ffpw-x:focus-visible{background:rgba(30,107,171,.07);color:#0B2233}
body.light-mode .ffpw-ico{background-color:rgba(15,155,114,.08);border-color:rgba(15,155,114,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F9B72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.6 3.8-5.6 7.2-5.6s6.3 2 7.2 5.6'/%3E%3C/svg%3E")}
body.light-mode .ffpw-h{color:#0B2233}
body.light-mode .ffpw-p{color:#3A5568}
/* pass 83: what a reason adds, as a short list (the trust reason) */
.ffpw-list{list-style:none;margin:-6px 0 18px;padding:0;display:grid;gap:8px;text-align:left}
.ffpw-list li{position:relative;padding-left:22px;font:400 13.5px/1.5 'Inter',system-ui,sans-serif;color:#C9DCEB}
.ffpw-list li::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:6px;border-left:2px solid #F2BE57;border-bottom:2px solid #F2BE57;transform:rotate(-45deg)}
body.light-mode .ffpw-list li{color:#2E4D63}
body.light-mode .ffpw-list li::before{border-color:#9A5B10}
body.light-mode .ffpw-btn{color:#1E4E73;border-color:rgba(30,107,171,.32)}
body.light-mode .ffpw-btn:hover,body.light-mode .ffpw-btn:focus-visible{background:rgba(30,107,171,.06)}
body.light-mode .ffpw-btn.pri{color:#FFFFFF;background:#0A6B4F;border-color:#0A6B4F}
body.light-mode .ffpw-btn.pri:hover,body.light-mode .ffpw-btn.pri:focus-visible{background:#0C7C5C;box-shadow:0 10px 24px -12px rgba(10,107,79,.55)}
body.light-mode .ffpw-pro{color:#47687D;border-top-color:rgba(30,107,171,.12)}
body.light-mode .ffpw-pro-tag{color:#8A5A00;border-color:rgba(180,120,0,.4);background:rgba(245,200,119,.12)}

@media (max-width:480px){
  .ffpw-card{padding:26px 20px 20px;border-radius:16px}
  .ffpw-h{font-size:19px}
  .ffpw-btn{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .ffpw-card{animation:none}
  .ffpw-btn,.ffpw-x{transition:none}
  .ffpw-btn:hover,.ffpw-btn:focus-visible{transform:none}
}
body.light-mode .ffpw-tc{background:#FFFFFF;border-color:rgba(30,107,171,.16)}
body.light-mode .ffpw-tc i{background:rgba(30,107,171,.14)}
body.light-mode .ffpw-sub{color:#47687D}
body.light-mode .ffpw-sub a{color:#1A5F99}