/* BCF free likes / free followers in the v1 free-tools style.
   Needs /assets/css/free-tools.css (ft-hero, ft-btn-primary, ft-trust-bar, ft-how-*, ft-seo-*, ft-faq-*).
   This file adds the claim card (several fields instead of the single search bar) and the FAQ list. */

.fs-free .fs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Claim card: same surface as the tool search bar (.ft-form-wrap), just taller. */
.fs-free .fs-card { max-width: 620px; margin: 0 auto 36px; padding: 22px; background: #fff; border: 1px solid rgba(226,232,240,.6); border-radius: 28px; box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); text-align: left; }
.fs-free .fs-badge { display: table; margin: 0 auto 18px; padding: 7px 16px; border-radius: 100px; background: linear-gradient(135deg, rgba(30,64,175,.08), rgba(37,99,235,.12)); color: var(--bcf-blue, #1e40af); font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* Fields: the pill input of the tools (.ft-search-input inside .ft-form-wrap) as standalone fields. */
.fs-free .fs-field { display: block; width: 100%; min-width: 0; height: 54px; margin: 0; padding: 0 22px; border: 1px solid #e2e8f0; border-radius: 100px; background: #f8fafc; font-family: 'Open Sans', sans-serif; font-size: 15px; color: #1e293b; outline: none; box-shadow: none; transition: border-color .25s, box-shadow .25s, background .25s; -webkit-appearance: none; appearance: none; }
.fs-free .fs-area { height: 104px; padding: 15px 22px; border-radius: 22px; line-height: 1.5; resize: vertical; }
.fs-free .fs-field::placeholder { color: #94a3b8; opacity: 1; }
.fs-free .fs-field:focus { background: #fff; border-color: rgba(30,64,175,.35); box-shadow: 0 4px 24px rgba(30,64,175,.12); }
.fs-free .fs-field[aria-invalid="true"] { border-color: #ef4444; background: #fff; }
.fs-free .fs-hint { margin: 7px 0 14px; padding: 0 22px; font-size: 12.5px; line-height: 1.45; color: #94a3b8; }
.fs-free .fs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.fs-free .fs-captcha { margin: 0 0 18px; }
.fs-free .fs-submit { width: 100%; padding: 17px 28px; font-family: inherit; font-size: 16px; font-weight: 700; }
.fs-free .fs-submit span { display: inline-flex; align-items: center; gap: 8px; }
.fs-free .fs-submit:disabled { opacity: .75; cursor: wait; transform: none; }
.fs-free .fs-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font-size: 13px; color: #64748b; text-align: center; }
.fs-free .fs-note svg { width: 15px; height: 15px; flex: 0 0 15px; color: #10b981; }
.fs-free .ft-trust-item svg { color: #10b981; }

/* Text area: the content building blocks (headings, step box, info box, images) are unstyled inside
   .ft-seo-section on all v1 tool pages today (e.g. /de/instagram-story-downloader). These rules give them
   the tool look; they can move into free-tools.css to fix the other tool pages too. */
.fs-free .ft-seo-section .content h2 { margin: 44px 0 14px; font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.3; color: #1e293b; }
.fs-free .ft-seo-section .content:first-child h2 { margin-top: 0; }
.fs-free .ft-seo-section .content__text,
.fs-free .ft-seo-section .content li { font-size: 16px; line-height: 1.75; color: #475569; }
.fs-free .ft-seo-section .content__text { margin: 0 0 16px; }
.fs-free .ft-seo-section .content li strong { color: #1e293b; }
.fs-free .ft-seo-section .content a { color: var(--bcf-blue, #1e40af); font-weight: 600; }
.fs-free .ft-seo-section .content__image-wrapper { margin: 28px 0; }
.fs-free .ft-seo-section .content__image-wrapper img { display: block; border-radius: 20px; box-shadow: 0 8px 30px rgba(15,23,42,.08); }
.fs-free .ft-seo-section .step-container { margin: 44px 0; padding: 30px; border: 1px solid rgba(30,64,175,.1); border-radius: 24px; background: linear-gradient(180deg, #eef4ff 0%, #f8fafc 100%); }
.fs-free .ft-seo-section .step-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.fs-free .ft-seo-section .step-header h2 { margin: 0; }
.fs-free .ft-seo-section .step-number { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--bcf-blue, #1e40af), var(--bcf-blue-mid, #2563eb)); color: #fff; font-size: 19px; box-shadow: 0 8px 20px rgba(30,64,175,.25); }
.fs-free .ft-seo-section .step-container .content__text:last-child { margin-bottom: 0; }
.fs-free .ft-seo-section .list-with-icons { margin: 32px 0; padding: 24px 28px; border-left: 4px solid var(--bcf-blue, #1e40af); border-radius: 18px; background: #f8fafc; }
.fs-free .ft-seo-section .list-with-icons .content__text:last-child { margin-bottom: 0; }
.fs-free .ft-seo-section .list-with-icons h2 { margin-top: 0; font-size: 22px; }

/* Sections alternate like the tool pages: hero gradient, grey steps, white text, grey FAQ. */
.fs-free .ft-faq-section { background: #f8fafc; }
.fs-free .ft-faq-container { max-width: 800px; }
.fs-free .fs-faq { display: grid; gap: 12px; }
.fs-free .fs-faq details { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.03); transition: box-shadow .2s, border-color .2s; }
.fs-free .fs-faq details[open] { border-color: rgba(30,64,175,.2); box-shadow: 0 4px 20px rgba(30,64,175,.08); }
.fs-free .fs-faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; color: #1e293b; }
.fs-free .fs-faq summary::-webkit-details-marker { display: none; }
.fs-free .fs-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 10px; background: linear-gradient(135deg, var(--bcf-blue, #1e40af), var(--bcf-blue-mid, #2563eb)); color: #fff; font-size: 18px; line-height: 30px; text-align: center; }
.fs-free .fs-faq details[open] summary::after { content: "\2212"; }
.fs-free .fs-faq details p { margin: 0; padding: 0 24px 22px; font-size: 15px; line-height: 1.7; color: #64748b; }
.fs-free .fs-faq-contact { margin: 28px 0 0; text-align: center; font-size: 14px; color: #64748b; }
.fs-free .fs-faq-contact a { color: var(--bcf-blue, #1e40af); font-weight: 600; }

@media (max-width: 640px) {
  .fs-free .fs-card { padding: 14px; border-radius: 22px; margin-bottom: 28px; }
  .fs-free .fs-row { grid-template-columns: 1fr; }
  .fs-free .fs-field { height: 52px; padding: 0 18px; }
  .fs-free .fs-area { height: 112px; padding: 14px 18px; border-radius: 18px; }
  .fs-free .fs-hint { padding: 0 18px; }
  .fs-free .fs-captcha { transform: scale(.94); transform-origin: center top; }
  .fs-free .fs-faq summary { padding: 18px 56px 18px 18px; font-size: 15px; }
  .fs-free .fs-faq details p { padding: 0 18px 18px; }
  .fs-free .ft-seo-section .content h2 { font-size: 22px; margin-top: 36px; }
  .fs-free .ft-seo-section .step-container { padding: 22px 18px; margin: 36px 0; }
  .fs-free .ft-seo-section .step-number { flex-basis: 42px; width: 42px; height: 42px; border-radius: 14px; font-size: 17px; }
  .fs-free .ft-seo-section .list-with-icons { padding: 20px; }
}