/*
 * Video tools — shared styles.
 *
 * One stylesheet for /script-to-video, /ai-image-video and /ai-video-generator.
 * The three pages render the same partial, so three copies of this inline in
 * three blades would be three places for the shape picker to drift.
 */

/* The `hidden` attribute only sets display:none through the UA stylesheet, so
   any author `display:` rule below silently beats it. Keep this first so every
   [hidden] inside the tool actually stays hidden. */
.vt [hidden], .vt-result[hidden], .vt-progress[hidden], .vt-quote[hidden] { display:none !important; }

/* ── price bar ────────────────────────────────────────────────────────── */
.vt-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:0 0 14px; border:1px solid #c7d2fe; background:#eef2ff; border-radius:10px; font-size:13px; color:#3730a3; flex-wrap:wrap; }
.vt-bar .vt-bar-dot { width:8px; height:8px; border-radius:50%; background:#6366f1; flex-shrink:0; }
.vt-bar.is-short { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.vt-bar.is-short .vt-bar-dot { background:#ef4444; }
.vt-bar strong { font-weight:800; color:inherit; }
.vt-bar .vt-bar-sep { color:#a5b4fc; }
.vt-bar .vt-bar-cta { margin-left:auto; }
.vt-bar .vt-bar-cta a, .vt-bar a { color:inherit; font-weight:700; text-decoration:underline; }

.vt-warn { padding:10px 14px; margin:0 0 14px; border:1px solid #fde68a; background:#fffbeb; border-radius:10px; font-size:12.5px; line-height:1.6; color:#92400e; }

.vt-link { background:none; border:0; padding:0; font-size:12.5px; font-weight:600; color:#4f46e5; cursor:pointer; }
.vt-link:hover { text-decoration:underline; }

/* ── script box ───────────────────────────────────────────────────────── */
.vt-field { display:block; }
.vt-label { display:block; font-size:12px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.vt-field textarea { width:100%; padding:12px; border:1px solid #d1d5db; border-radius:10px; font-size:14.5px; line-height:1.65; resize:vertical; background:#fff; font-family:inherit; }
.vt-field textarea:focus { outline:none; border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.vt-help { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:5px; font-size:12px; color:#9ca3af; }

/* ── live quote ───────────────────────────────────────────────────────── */
.vt-quote { margin-top:12px; padding:11px 14px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:10px; }
.vt-quote-row { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.vt-q-num { font-size:17px; font-weight:800; color:#111827; font-variant-numeric:tabular-nums; }
.vt-q-lab { font-size:12.5px; color:#6b7280; margin-right:14px; }

/* The itemised bill. Every render is paid now, so the total on its own is not
   enough — a price nobody can account for is a price people distrust. */
.vt-q-lines { margin-top:9px; border-top:1px solid #e5e7eb; padding-top:8px; display:flex; flex-direction:column; gap:5px; }
.vt-q-lines:empty { display:none; }
.vt-q-line { display:flex; align-items:baseline; gap:8px; font-size:12.5px; }
.vt-q-line-lab { font-weight:700; color:#374151; flex-shrink:0; }
.vt-q-line-det { color:#9ca3af; flex:1; min-width:0; }
.vt-q-line-num { font-weight:700; color:#111827; font-variant-numeric:tabular-nums; }
.vt-quote-note { margin-top:8px; font-size:12.5px; line-height:1.55; color:#92400e; }

/* ── shape picker ─────────────────────────────────────────────────────── */
.vt-shape-field { margin-top:16px; }
.vt-shapes { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.vt-shape { position:relative; display:block; cursor:pointer; }
/* Visually hidden, not display:none — the radio must stay focusable so the
   group is still usable from the keyboard. */
.vt-shape input { position:absolute; opacity:0; width:1px; height:1px; }
.vt-shape-body { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px 9px; border:1.5px solid #e5e7eb; border-radius:10px; background:#fff; text-align:center; transition:border-color .12s, background .12s; }
.vt-shape:hover .vt-shape-body { border-color:#c7d2fe; background:#fafaff; }
.vt-shape input:checked + .vt-shape-body { border-color:#4f46e5; background:#eef2ff; }
.vt-shape input:focus-visible + .vt-shape-body { outline:2px solid #4f46e5; outline-offset:2px; }
.vt-shape-frame { height:52px; display:flex; align-items:center; justify-content:center; }
.vt-shape-box { display:block; height:52px; max-width:100%; border-radius:3px; background:#c7d2fe; border:1.5px solid #818cf8; }
.vt-shape input:checked + .vt-shape-body .vt-shape-box { background:#4f46e5; border-color:#4338ca; }
.vt-shape-name { font-size:12.5px; font-weight:700; color:#111827; }
.vt-shape-use { font-size:10.5px; color:#9ca3af; }

/* ── options ──────────────────────────────────────────────────────────── */
.vt-opts { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.vt-opt { flex:1; min-width:190px; display:flex; flex-direction:column; }
.vt-opt select { padding:9px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:13.5px; background:#fff; color:#111827; }
.vt-opt select:disabled { background:#f3f4f6; color:#9ca3af; }

.vt-toggles { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.vt-toggle { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:#374151; cursor:pointer; }
.vt-toggle input { margin-top:2px; width:16px; height:16px; accent-color:#4f46e5; flex-shrink:0; }
.vt-toggle em { font-style:normal; color:#9ca3af; font-size:12.5px; }

.vt-status { margin-top:14px; padding:11px 14px; border-radius:10px; font-size:13.5px; line-height:1.6; }
.vt-status.is-busy  { background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; }
.vt-status.is-error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.vt-status.is-ok    { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.vt-status a { color:inherit; font-weight:700; }

/* ── progress ─────────────────────────────────────────────────────────── */
.vt-progress { margin-top:16px; padding:14px; border:1px solid #c7d2fe; background:#f5f7ff; border-radius:12px; }
.vt-prog-head { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:600; color:#3730a3; margin-bottom:8px; }
.vt-prog-head #vtPct { font-variant-numeric:tabular-nums; }
.vt-prog-bar { height:8px; border-radius:99px; background:#e0e7ff; overflow:hidden; }
.vt-prog-fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); transition:width .4s ease; }
.vt-prog-note { margin:9px 0 0; font-size:12px; line-height:1.55; color:#6b7280; }

/* ── result ───────────────────────────────────────────────────────────── */
.vt-result { margin-top:16px; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#111827; }
.vt-video { width:100%; display:block; max-height:70vh; background:#000; }
.vt-result-foot { display:flex; align-items:center; gap:10px; padding:11px 14px; background:#f9fafb; border-top:1px solid #e5e7eb; flex-wrap:wrap; }
.vt-result-meta { font-size:12.5px; color:#6b7280; line-height:1.5; }
.vt-btn { padding:8px 15px; border:1px solid #d1d5db; background:#fff; border-radius:8px; font-size:13px; font-weight:600; color:#374151; cursor:pointer; text-decoration:none; display:inline-block; }
.vt-btn-primary { margin-left:auto; background:#4f46e5; border-color:#4f46e5; color:#fff; }
.vt-btn-primary:hover { background:#4338ca; }
.vt-credit { padding:10px 14px; background:#fffbeb; border-top:1px solid #fde68a; font-size:12px; line-height:1.55; color:#92400e; }

@media (max-width:600px) {
    .vt-opts { flex-direction:column; }
    .vt-bar .vt-bar-cta { margin-left:0; width:100%; }
    .vt-btn-primary { margin-left:0; width:100%; text-align:center; }
    .vt-shape-use { display:none; }
    .vt-q-line { flex-wrap:wrap; }
    .vt-q-line-det { flex-basis:100%; order:3; }
}