/* Filovo — Shared Tool Runtime styles. Uses the same CSS vars every tool page already defines. */
.dropzone{border:2px dashed #2B3B59;border-radius:16px;padding:44px 24px;text-align:center;transition:border-color .2s,background .2s;cursor:pointer;position:relative;}
.dropzone.drag{border-color:var(--teal);background:rgba(20,184,166,0.06);}
.dropzone .dz-icon{font-size:2.2rem;margin-bottom:8px;}
.dropzone h3{font-size:1.02rem;margin-bottom:5px;}
.dropzone p{color:var(--slate);font-size:.86rem;}
/* File input stays hidden; the dropzone itself has a direct click listener
   that calls fileInput.click(). A direct listener on the tapped element
   (not a bubbled/async call) is treated as a genuine user gesture by
   Android WebView and all major mobile browsers, so the picker opens
   reliably. The earlier "transparent overlay" approach caused issues when
   it overlapped other interactive elements inside the dropzone. */
.dropzone input[type="file"]{
  display:none;
}
.url-paste-row{display:flex;gap:8px;margin-top:12px;align-items:center;}
.url-paste-row input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:.82rem;color:var(--ink);outline:none;}
.url-paste-row input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.url-paste-row input:focus{border-color:var(--teal);}
.url-paste-row button{background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:.8rem;font-weight:600;color:var(--slate);cursor:pointer;white-space:nowrap;transition:all .15s;}
.url-paste-row button:hover{border-color:var(--teal);color:var(--teal-soft);}
.file-list{margin-top:20px;display:grid;gap:10px;}
.file-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--bg);}
.file-row.drag-over{border-color:var(--teal);background:rgba(20,184,166,0.06);}
.file-row .thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex-shrink:0;background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.file-row .name{font-weight:600;font-size:.86rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-row .size{color:var(--slate);font-size:.76rem;flex-shrink:0;}
.file-row .remove{color:#F87171;font-size:.82rem;font-weight:700;padding:4px 8px;border-radius:6px;flex-shrink:0;}
.file-row .remove:hover{background:rgba(248,113,113,0.1);}
.drag-handle{cursor:grab;color:var(--slate-dim);font-size:.9rem;padding:0 6px;flex-shrink:0;}
.drag-handle:active{cursor:grabbing;}
.controls{display:none;gap:14px;margin-top:22px;flex-wrap:wrap;align-items:center;}
.field{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--slate);}
.field input,.field select{background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.84rem;color:var(--ink);outline:none;}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.field input:focus,.field select:focus{border-color:var(--teal);}
.convert-btn{background:var(--teal);color:#04201C;padding:13px 24px;border-radius:10px;font-weight:700;font-size:.9rem;transition:transform .15s,opacity .15s;border:none;cursor:pointer;}
.convert-btn:hover{transform:translateY(-2px);}
.convert-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.progress-wrap{margin-top:16px;display:none;}
.progress-wrap.show{display:block;}
.progress-label{font-size:.8rem;color:var(--slate);margin-bottom:6px;}
.progress-track{height:5px;background:var(--line);border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;background:var(--teal);border-radius:99px;width:0%;transition:width .3s ease;}
.error-msg{margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:#FCA5A5;font-size:.85rem;display:none;}
.error-msg.show{display:block;}
.size-result{display:none;margin-top:12px;padding:12px 16px;background:rgba(20,184,166,0.07);border:1px solid rgba(20,184,166,0.2);border-radius:10px;font-size:.86rem;color:var(--slate);}
.size-result.show{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.size-result .sz-before{color:var(--slate);}
.size-result .sz-arrow{color:var(--teal);font-size:1rem;}
.size-result .sz-after{color:var(--teal-soft);font-weight:700;}
.size-result .sz-saved{background:rgba(20,184,166,0.15);color:var(--teal-soft);padding:3px 10px;border-radius:99px;font-weight:700;font-size:.78rem;margin-left:auto;}
.preview-wrap{margin-top:16px;display:none;}
.preview-wrap.show{display:block;}
.preview-wrap p{font-size:.78rem;color:var(--slate);margin-bottom:8px;}
.preview-img{max-width:100%;max-height:200px;border-radius:10px;border:1px solid var(--line);object-fit:contain;}
.preview-canvas{max-width:100%;max-height:200px;border-radius:10px;border:1px solid var(--line);}
.result{margin-top:22px;padding:16px;border-radius:12px;background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.3);display:none;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;}
.result.show{display:flex;}
.result .left{display:flex;align-items:center;gap:12px;}
.result .left b{font-size:.9rem;}
.download-btn{background:var(--teal);color:#04201C;padding:10px 18px;border-radius:9px;font-weight:700;font-size:.84rem;}
.rating-wrap{margin-top:14px;display:none;align-items:center;gap:12px;}
.rating-wrap.show{display:flex;}
.rating-wrap p{font-size:.82rem;color:var(--slate);}
.rating-btn{padding:6px 14px;border-radius:8px;font-size:.9rem;cursor:pointer;border:1px solid var(--line);background:var(--bg-card);transition:all .15s;}
.rating-btn:hover{border-color:var(--teal);transform:scale(1.1);}
.rating-btn.rated{background:rgba(20,184,166,0.1);border-color:var(--teal);}
.rating-thanks{font-size:.8rem;color:var(--teal-soft);display:none;}
.rating-thanks.show{display:block;}
.share-wrap{margin-top:16px;}
.share-wrap p{font-size:.8rem;color:var(--slate);margin-bottom:10px;}
.share-btns{display:flex;gap:8px;flex-wrap:wrap;}
.share-btn{padding:7px 14px;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--bg-card);color:var(--slate);transition:all .15s;display:flex;align-items:center;gap:6px;}
.share-btn:hover{border-color:var(--teal);color:var(--teal-soft);}
.tool-run-card{max-width:1100px;margin:0 auto;padding:0 24px;text-align:left;}
.tool-run-inner{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:28px;}
@media(max-width:600px){
  .dropzone{padding:28px 14px;}
  .dropzone h3{font-size:.93rem;}
  .controls{flex-direction:column;align-items:stretch;gap:10px;}
  .controls .field{flex-wrap:wrap;}
  .convert-btn{width:100%;text-align:center;justify-content:center;padding:14px;font-size:.93rem;}
  .file-row{padding:8px 10px;gap:10px;}
  .file-row .name{font-size:.8rem;}
  .file-row .size{display:none;}
  .download-btn{padding:10px 14px;font-size:.82rem;}
  .result{flex-direction:column;align-items:flex-start;gap:10px;}
  .result .download-btn{width:100%;text-align:center;}
}

/* ============================================================
   Phase 4 additions — Supported Formats, better empty/error
   states, file summary bar, and micro-animations. Loads after
   each page's own <style>, so these layer on top without any
   per-page HTML changes needed.
   ============================================================ */

/* Supported formats badge row (shown above the dropzone) */
.supported-formats{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.supported-formats .sf-label{font-size:.76rem;color:var(--slate-dim);margin-right:2px;}
.supported-formats .sf-badge{background:var(--bg-soft);border:1px solid var(--line);color:var(--slate);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.02em;}

/* Better empty state — subtle icon motion on hover/drag */
.dropzone .dz-icon{transition:transform .25s ease;}
.dropzone:hover .dz-icon{transform:translateY(-4px);}
@keyframes fv-dz-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.dropzone.drag .dz-icon{animation:fv-dz-pulse 1s ease-in-out infinite;}

/* File summary bar (count + total size + clear-all) */
.file-summary{display:none;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--slate-dim);margin-top:10px;padding:0 2px;}
.file-summary.show{display:flex;}
.file-summary .clear-all{color:#F87171;font-weight:700;cursor:pointer;background:none;border:none;font-size:.78rem;padding:2px 4px;}
.file-summary .clear-all:hover{text-decoration:underline;}

/* Better error state — inline retry action */
.error-msg{display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.error-msg.show{display:flex;}
.error-msg .err-text{flex:1;min-width:200px;}
.error-msg .err-retry{background:rgba(248,113,113,0.15);color:#FCA5A5;border:1px solid rgba(248,113,113,0.4);border-radius:8px;padding:6px 14px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s;flex-shrink:0;}
.error-msg .err-retry:hover{background:rgba(248,113,113,0.28);}

/* Better download/result reveal — soft pop-in instead of an instant snap */
@keyframes fv-result-pop{0%{transform:scale(.95);opacity:0;}100%{transform:scale(1);opacity:1;}}
.result.show{animation:fv-result-pop .3s cubic-bezier(.34,1.56,.64,1);}

/* Micro-animations / hover polish for existing elements already on every tool page */
.related-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.related-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px -14px rgba(0,0,0,.4);border-color:var(--teal);}
.steps-list li{transition:transform .18s ease,border-color .18s ease;}
.steps-list li:hover{transform:translateX(4px);border-color:var(--teal);}
.faq-item{transition:border-color .18s ease;}
.faq-item:hover{border-color:var(--teal);}
.file-row{transition:border-color .15s ease,transform .15s ease;}
.file-row:hover{border-color:var(--teal);}
.trust-badge{transition:transform .15s ease;}
.trust-badge:hover{transform:translateY(-2px);}

/* Better CTA — hover lift on the hero buttons (adds to the existing opacity-only transition) */
.btn-primary, .btn-ghost{transition:transform .15s ease, opacity .15s ease, border-color .15s ease;}
.btn-primary:hover, .btn-ghost:hover{transform:translateY(-2px);}

/* Better convert UI — animated shimmer stripe while progress bar is active */
@keyframes fv-progress-shimmer{0%{background-position:0 0;}100%{background-position:40px 0;}}
.progress-fill{background-image:linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);background-size:28px 28px;animation:fv-progress-shimmer 1s linear infinite;}

/* Scroll-reveal utility (used by the small reveal script tool-runtime.js adds) */
.fv-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.fv-reveal.fv-in{opacity:1;transform:translateY(0);}

@media(max-width:600px){
  .supported-formats{margin-bottom:10px;}
}