/* ============================================================================
   Falah share card

   Was an inline <style> block emitted per instance and keyed to a random id.
   That put stylesheet text inside post content, where another plugin on this
   site rewrites markup: it turned `maxWidth=""` into `maxWidth="1104""` in the
   sibling script and killed it with a syntax error. A real stylesheet cannot be
   reached by a content filter, which is the whole point of moving it here.

   Colour comes from Theme Options through --fl-acc and --fl-meta, emitted by
   brand_vars() in PHP. No palette lives in this file.
   ========================================================================= */

.falah-share{
  --acc: var(--fl-acc, #1B4332);
  --mu:  var(--fl-meta, #6d6355);
  --iv:  color-mix(in srgb, var(--acc) 4%,  #FBF7EE);
  --ln:  color-mix(in srgb, var(--acc) 18%, #EFE7D6);

  position:relative; z-index:3; clear:both; overflow:visible; box-sizing:border-box;
  margin:34px auto; padding:22px 24px;
  border:1px solid var(--ln); border-radius:16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 2%, #FFFDF8), var(--iv));
  text-align:start;
}
/* The footer-emitted card is hidden until the script has placed it, so it never
   flashes at the bottom of the page before moving. A shortcode-placed card is
   already where it belongs and carries no such attribute. */
.falah-share[data-fs-pending]{display:none}

.falah-share .fs-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.falah-share .fs-rule{flex:1;max-width:180px;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln))}
.falah-share .fs-label{font-size:16px;color:var(--acc);line-height:1.9;white-space:nowrap}
.falah-share .fs-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.falah-share .fs-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:12px 14px; min-height:44px; border-radius:12px;
  border:1px solid var(--ln); background:#fff; color:var(--acc);
  text-decoration:none; font:inherit; font-size:16px; cursor:pointer; line-height:1.6;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.falah-share .fs-btn svg{width:19px;height:19px;flex:none;fill:currentColor;transition:fill .2s ease}
.falah-share .fs-btn:hover{transform:translateY(-2px);border-color:var(--brand,var(--acc));
  box-shadow:0 10px 22px -12px rgba(60,45,20,.5)}
.falah-share .fs-btn:hover svg{fill:var(--brand,var(--acc))}
.falah-share .fs-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.falah-share .fs-btn.is-done{
  background:color-mix(in srgb, var(--acc) 8%, #FBF7EE);
  border-color:color-mix(in srgb, var(--acc) 30%, #EFE7D6);
  color:var(--acc);
}
.falah-share .fs-native{background:var(--acc);color:#fff;border-color:var(--acc);display:none}
.falah-share .fs-native svg{fill:#fff}
.falah-share .fs-native:hover{background:color-mix(in srgb, var(--acc) 85%, #000)}
.falah-share.has-native .fs-native{display:inline-flex}

@media (max-width:600px){
  /* When the phone offers a real share sheet, one button is cleaner than six.
     If it does not, the channel buttons stay, so nobody is left without a way. */
  .falah-share.has-native .fs-ch{display:none}
  .falah-share{padding:18px 16px;margin:26px auto}
  .falah-share .fs-btn{padding:13px 16px;min-height:48px;flex:1 1 auto;justify-content:center}
  .falah-share .fs-native{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .falah-share .fs-btn{transition:none}
  .falah-share .fs-btn:hover{transform:none}
}

/* Bilingual mode. The Q&A page carries both languages behind a browser-side
   toggle, so each label ships in both and the host page's CSS hides one side.
   Direction follows the visible language rather than the server's guess. */
.falah-share[data-fs-lang="both"]{direction:inherit}