/* FarsKids: "add to Google preferred sources" card — pretty, animated, with pending / done states. */
html body .fk-google-source{position:relative;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0 0 14px;padding:10px 12px;border-radius:16px;direction:rtl;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.075) 50%,transparent 62%) 160% 0/260% 100% no-repeat,
             linear-gradient(135deg,rgba(66,133,244,.16),rgba(168,85,247,.11) 58%,rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 34px -22px rgba(66,133,244,.8),inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:fkGsIn .6s cubic-bezier(.22,1.1,.36,1) both,fkGsSheen 6s 1.4s ease-in-out infinite;transition:border-color .4s,box-shadow .4s}
html body .fk-google-source *{box-sizing:border-box}
html body .fk-google-source::before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 3px 3px;pointer-events:none;
  background:linear-gradient(90deg,#ea4335,#fbbc05,#34a853,#4285f4,#ea4335);background-size:200% 100%;opacity:.85;animation:fkGsLine 5s linear infinite}

html body .fk-google-source .fk-g{position:relative;flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#fff;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.06);animation:fkGsFloat 4s ease-in-out infinite}
html body .fk-google-source .fk-g svg{width:20px;height:20px;display:block}

html body .fk-google-source .fk-google-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.3;min-width:0;flex:1;color:#fff}
html body .fk-google-source .fk-google-copy b{font-size:13px;font-weight:800;letter-spacing:.1px}
html body .fk-google-source .fk-google-copy small{font-size:10.5px;color:rgba(255,255,255,.62);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .3s}

html body .fk-google-source .fk-google-add{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:88px;padding:8px 14px;border-radius:12px;
  font-size:11.5px;font-weight:800;line-height:1.4;white-space:nowrap;cursor:pointer;text-decoration:none!important;color:#fff!important;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.38) 50%,transparent 64%) 170% 0/260% 100% no-repeat,linear-gradient(135deg,#5b96f8,#3367d6);
  box-shadow:0 12px 24px -12px rgba(66,133,244,.95),inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .28s cubic-bezier(.22,1.3,.36,1),box-shadow .3s,filter .2s;animation:fkGsShine 4.2s 1.8s ease-in-out infinite}
html body .fk-google-source .fk-google-add:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(66,133,244,1),inset 0 1px 0 rgba(255,255,255,.4);filter:brightness(1.06)}
html body .fk-google-source .fk-google-add:active{transform:scale(.95)}
html body .fk-google-source .fk-google-add:focus-visible{outline:2px solid #fff;outline-offset:2px}

html body .fk-google-source .fk-gs-plus,html body .fk-google-source .fk-gs-spin,html body .fk-google-source .fk-gs-check{flex:0 0 auto;width:16px;height:16px;display:none;position:relative}
html body .fk-google-source .fk-gs-plus{display:block}
html body .fk-google-source .fk-gs-plus svg{width:16px;height:16px;display:block;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;transition:transform .35s cubic-bezier(.22,1.3,.36,1)}
html body .fk-google-source .fk-google-add:hover .fk-gs-plus svg{transform:rotate(90deg) scale(1.1)}

/* pending (Google window is open) */
html body .fk-google-source.is-loading .fk-google-add{animation:none;filter:saturate(.85)}
html body .fk-google-source.is-loading .fk-gs-plus{display:none}
html body .fk-google-source.is-loading .fk-gs-spin{display:block;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:fkGsSpin .7s linear infinite}

/* done: green button, check pops with a burst */
html body .fk-google-source.is-done{border-color:rgba(52,211,153,.38);box-shadow:0 14px 34px -22px rgba(16,185,129,.85),inset 0 1px 0 rgba(255,255,255,.05)}
html body .fk-google-source.is-done .fk-google-add{animation:none;background:linear-gradient(135deg,#34d399,#12a36a);box-shadow:0 12px 24px -12px rgba(16,185,129,.95),inset 0 1px 0 rgba(255,255,255,.35)}
html body .fk-google-source.is-done .fk-gs-plus,html body .fk-google-source.is-done .fk-gs-spin{display:none}
html body .fk-google-source.is-done .fk-gs-check{display:grid;place-items:center;border-radius:50%;background:#fff}
html body .fk-google-source.is-done .fk-google-copy small{color:#7ee2b8}
html body .fk-google-source .fk-gs-check svg{width:11px;height:11px;display:block;fill:none;stroke:#12a36a;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
html body .fk-google-source .fk-gs-check svg path{stroke-dasharray:20;stroke-dashoffset:0}
html body .fk-google-source.is-just-done{animation:fkGsCard .8s ease-out both}
html body .fk-google-source.is-just-done .fk-gs-check{animation:fkGsPop .6s cubic-bezier(.2,1.6,.4,1) both}
html body .fk-google-source.is-just-done .fk-gs-check svg path{animation:fkGsDraw .4s .22s ease-out both;stroke-dashoffset:20}
html body .fk-google-source.is-just-done .fk-gs-check::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;animation:fkGsRing .65s .1s ease-out both;pointer-events:none}
html body .fk-google-source .fk-gs-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
html body .fk-google-source .fk-gs-sparks i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;opacity:0;background:#fff}
html body .fk-google-source .fk-gs-sparks i:nth-child(4n+1){background:#fbbc05}
html body .fk-google-source .fk-gs-sparks i:nth-child(4n+2){background:#fff}
html body .fk-google-source .fk-gs-sparks i:nth-child(4n+3){background:#4285f4}
html body .fk-google-source .fk-gs-sparks i:nth-child(4n){background:#ea4335}
html body .fk-google-source.is-just-done .fk-gs-sparks i{animation:fkGsSpark .7s .12s cubic-bezier(.1,.7,.3,1) both}

@media(max-width:640px){
  html body .fk-google-source{gap:10px;padding:9px 10px;margin-bottom:12px;border-radius:15px}
  html body .fk-google-source .fk-g{width:32px;height:32px;border-radius:11px}
  html body .fk-google-source .fk-g svg{width:18px;height:18px}
  html body .fk-google-source .fk-google-copy b{font-size:12px}
  html body .fk-google-source .fk-google-copy small{font-size:9.5px}
  html body .fk-google-source .fk-google-add{min-width:80px;padding:7px 11px;font-size:11px;gap:6px}
}
@keyframes fkGsIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fkGsSheen{0%,55%{background-position:160% 0,0 0}100%{background-position:-70% 0,0 0}}
@keyframes fkGsShine{0%,55%{background-position:170% 0,0 0}100%{background-position:-70% 0,0 0}}
@keyframes fkGsLine{to{background-position:200% 0}}
@keyframes fkGsFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-2.5px) rotate(2deg)}}
@keyframes fkGsSpin{to{transform:rotate(360deg)}}
@keyframes fkGsPop{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.45) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes fkGsDraw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes fkGsRing{from{transform:scale(1);opacity:.9}to{transform:scale(2.9);opacity:0}}
@keyframes fkGsSpark{0%{opacity:1;transform:rotate(var(--a)) translateY(-4px) scale(.5)}100%{opacity:0;transform:rotate(var(--a)) translateY(-26px) scale(1.1)}}
@keyframes fkGsCard{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}100%{box-shadow:0 0 0 16px rgba(52,211,153,0)}}
@media(prefers-reduced-motion:reduce){html body .fk-google-source,html body .fk-google-source *{animation:none!important;transition:none!important}html body .fk-google-source .fk-gs-sparks{display:none}}