/* Faranetwork Features v3 */

/* Stories */
.fnf-stories { display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 14px; scrollbar-width: none; }
.fnf-stories::-webkit-scrollbar { display: none; }
.fnf-story-btn { flex: none; width: 78px; background: none; border: 0; cursor: pointer; text-align: center; font: inherit; padding: 0; }
.fnf-story-ring { display: grid; place-items: center; width: 72px; height: 72px; margin: auto; border-radius: 50%; padding: 3px; background: conic-gradient(#38bdf8, #6366f1, #0ea5e9, #38bdf8); }
.fnf-story-ring img, .fnf-story-ring i { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #e0f2fe; display: grid; place-items: center; font-style: normal; color: #0284c7; }
.fnf-story-btn small { display: block; margin-top: 4px; font-size: .75rem; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnf-sv { position: fixed; inset: 0; z-index: 100000; background: rgba(2, 6, 23, .92); display: grid; place-items: center; }
.fnf-sv__box { position: relative; width: min(420px, 100vw); height: min(760px, 100vh); background: #000; border-radius: 18px; overflow: hidden; display: grid; }
@media (max-width: 480px) { .fnf-sv__box { border-radius: 0; height: 100vh; } }
.fnf-sv__media, .fnf-sv__media img, .fnf-sv__media video { width: 100%; height: 100%; object-fit: contain; grid-area: 1 / 1; }
.fnf-sv__bars { position: absolute; top: 10px; inset-inline: 10px; display: flex; gap: 4px; z-index: 3; }
.fnf-sv__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; position: relative; }
.fnf-sv__bars i.done { background: #fff; }
.fnf-sv__bars i.run::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: right; animation: fnf-sv var(--d, 6s) linear forwards; }
@keyframes fnf-sv { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fnf-sv__title { position: absolute; top: 24px; inset-inline: 14px; z-index: 3; color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.fnf-sv__close { position: absolute; top: 20px; inset-inline-start: 12px; z-index: 4; background: rgba(0, 0, 0, .4); color: #fff; border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.fnf-sv__cta { position: absolute; bottom: 24px; inset-inline: 24px; z-index: 4; text-align: center; }

/* Timeline */
.fnf-timeline { list-style: none; display: flex; padding: 0; margin: 16px 0; }
.fnf-timeline li { flex: 1; text-align: center; position: relative; font-size: .85rem; color: #94a3b8; }
.fnf-timeline li i { display: block; width: 22px; height: 22px; margin: 0 auto 6px; border-radius: 50%; background: #e2e8f0; position: relative; z-index: 2; }
.fnf-timeline li::before { content: ''; position: absolute; top: 10px; inset-inline: 50% -50%; height: 3px; background: #e2e8f0; z-index: 1; }
.fnf-timeline li:last-child::before { display: none; }
.fnf-timeline li.is-done, .fnf-timeline li.is-current { color: #0f172a; font-weight: 700; }
.fnf-timeline li.is-done i, .fnf-timeline li.is-current i { background: #0ea5e9; }
.fnf-timeline li.is-done::before { background: #0ea5e9; }
.fnf-timeline li.is-current i { box-shadow: 0 0 0 5px rgba(14, 165, 233, .25); }
.fnf-timeline__bad { background: #fee2e2; color: #991b1b; border-radius: 999px; padding: 4px 16px; font-weight: 700; }
.fnf-timeline__track { text-align: center; }
.fnf-track { max-width: 520px; margin: auto; }

/* Q&A */
.fnf-q { border: 1px solid #dbeafe; border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; background: #fff; }
.fnf-q__a { margin-top: 8px; padding: 8px 12px; background: #f0f9ff; border-radius: 10px; }
.fnf-q small { color: #64748b; }

/* Address book */
.fnf-addr__item { border: 1px solid #dbeafe; border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; background: #fff; }
.fnf-addr-pick select { width: 100%; }

/* Product media & installments */
.fnf-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.fnf-video iframe, .fnf-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fnf-catalog { display: inline-block; margin-top: 8px; border: 1px solid #7dd3fc; border-radius: 999px; padding: 6px 18px; font-weight: 700; }
.fnf-inst { background: #f0f9ff; border-radius: 14px; padding: 10px 16px; margin: 10px 0; }
.fnf-inst summary { cursor: pointer; font-weight: 700; }
.fnf-inst ul { margin: 8px 0; padding-inline-start: 18px; }

/* FAQ search */
.fnf-faq-search { width: 100%; max-width: 880px; display: block; margin: 0 auto 14px; }
.fnf-faqlist [hidden] { display: none !important; }

/* Blog helpers */
.fnf-readtime { color: #64748b; font-size: .9rem; }
.fnf-toc { background: #f0f9ff; border: 1px solid #dbeafe; border-radius: 16px; padding: 14px 20px; margin: 16px 0; }
.fnf-toc ol { margin: 8px 0 0; padding-inline-start: 20px; }
.fnf-toc li.l3 { margin-inline-start: 16px; font-size: .92rem; }

/* Back to top */
.fnf-top { position: fixed; bottom: 86px; inset-inline-end: 20px; z-index: 990; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(2, 132, 199, .35); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; }
.fnf-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 768px) { .fnf-top { bottom: 130px; } }