/* ================================================================
   VidSnap 6.7 — Fixed mobile layout + no jQuery (fast PageSpeed)
   ✅ System fonts only — zero external font requests
   ✅ Mobile: 10px padding, stacked input+button layout fixed
   ================================================================ */

.vs-wrap {
  --red:       #FF0000;
  --red-dk:    #cc0000;
  --red-lt:    #fff0f0;
  --red-mid:   #ffd6d6;
  --surface:   #ffffff;
  --surface2:  #f4f5fc;
  --border:    #e4e6f2;
  --text:      #1a1a2e;
  --text-soft: #6b6b8a;
  --text-mute: #a0a0bb;
  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 2px 18px rgba(0,0,40,.07);

  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px 48px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  color: var(--text);
  background: transparent;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.vs-wrap *, .vs-wrap *::before, .vs-wrap *::after { box-sizing: border-box; }

/* ── AD ─────────────────────────────────────────────────────────── */
.vs-ad { background:#fafafa; border:1.5px dashed #ddd; border-radius:var(--radius-sm); min-height:90px; display:flex; align-items:center; justify-content:center; margin:14px 0; }
.vs-ad-lbl { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:#bbb; }

/* ── INPUT CARD ─────────────────────────────────────────────────── */
.vs-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  border: 1px solid rgba(0,0,40,.06);
}

/* Desktop: input + button side by side */
.vs-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.vs-iwrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.vs-input {
  display: block;
  width: 100%;
  background: #f9faff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 96px 0 16px;
  font-size: .94rem;
  font-family: inherit;
  color: var(--text);
  outline: none;
  height: 52px;
  line-height: 52px;
  transition: border-color .18s, box-shadow .18s;
}
.vs-input::placeholder { color: #b4b4cc; }
.vs-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224,32,32,.09);
  background: #fff;
}

/* Paste button — sits inside input on the right */
.vs-paste {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 34px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color .18s, color .18s;
}
.vs-paste:hover { border-color: #aaa; color: var(--text); }

/* Download button */
.vs-dl-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 24px;
  height: 52px;
  font-size: .94rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 148px;
  box-shadow: 0 4px 14px rgba(224,32,32,.32);
  transition: background .18s, box-shadow .18s, transform .12s;
}
.vs-dl-btn:hover:not(:disabled) { background:var(--red-dk); transform:translateY(-1px); box-shadow:0 6px 18px rgba(224,32,32,.38); }
.vs-dl-btn:active:not(:disabled) { transform:translateY(0); }
.vs-dl-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

.vs-spin {
  display: none;
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vs-rot .6s linear infinite;
  flex-shrink: 0;
}
@keyframes vs-rot { to { transform:rotate(360deg); } }

/* Message */
.vs-msg {
  font-size: .83rem; font-weight: 500;
  margin: 9px 0 0;
  color: var(--red);
  line-height: 1.5;
  display: none;
}

/* ── SKELETON ───────────────────────────────────────────────────── */
.vs-pulse { background:linear-gradient(90deg,#f0f0f8 25%,#e8e8f5 50%,#f0f0f8 75%); background-size:200% 100%; animation:vs-shim 1.4s infinite; border-radius:6px; }
@keyframes vs-shim { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.vs-skel-row { display:flex; gap:14px; margin-top:20px; margin-bottom:12px; }
.vs-skel-thumb { width:155px; height:88px; flex-shrink:0; border-radius:10px; }
.vs-skel-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.vs-skel-btn { height:52px; border-radius:var(--radius-sm); }

/* ── RESULT ─────────────────────────────────────────────────────── */
.vs-result { margin-top:22px; animation:vs-up .26s ease both; }
@keyframes vs-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.vs-media { display:flex; gap:16px; padding-bottom:18px; border-bottom:1.5px solid var(--border); margin-bottom:16px; }
.vs-thumb-wrap { position:relative; width:155px; flex-shrink:0; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--surface2); border:1px solid var(--border); }
.vs-thumb-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.vs-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.26); color:#fff; font-size:1.3rem; pointer-events:none; }
.vs-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.vs-ptag { display:inline-block; background:var(--red-lt); color:var(--red); border:1px solid var(--red-mid); border-radius:100px; padding:2px 11px; font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; align-self:flex-start; }
.vs-vtitle { font-size:.96rem; font-weight:700; color:var(--text); line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vs-vauth, .vs-vdur { font-size:.77rem; color:var(--text-soft); margin:0; }
.vs-fmt-lbl { font-size:.69rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin:0 0 10px; }
.vs-fmts { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:9px; }
.vs-fmt-btn { display:flex; align-items:center; gap:10px; background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px; text-decoration:none; color:var(--text); font-family:inherit; font-size:.87rem; cursor:pointer; transition:border-color .16s,background .16s,transform .16s; }
.vs-fmt-btn:hover { border-color:var(--red); background:var(--red-lt); transform:translateY(-2px); color:var(--text); }
.vs-fmt-btn--hd { border-color:rgba(224,32,32,.2); background:#fff8f8; }
.vs-fmt-btn--audio { border-color:rgba(99,99,200,.2); background:#f8f8ff; }
.vs-fmt-btn--audio:hover { border-color:#6363dc; background:#f0f0ff; }
.vs-fmt-icon { font-size:1.05rem; flex-shrink:0; }
.vs-fmt-info { flex:1; text-align:left; }
.vs-fmt-q { font-weight:700; font-size:.87rem; display:block; }
.vs-fmt-t { font-size:.68rem; color:var(--text-mute); margin-top:1px; display:block; }
.vs-fmt-badge { font-size:.59rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--red); color:#fff; border-radius:4px; padding:2px 6px; white-space:nowrap; flex-shrink:0; }
.vs-fmt-badge--audio { background:#6363dc; }
.vs-note { font-size:.72rem; color:var(--text-mute); margin:14px 0 0; text-align:center; line-height:1.55; }

/* ── HOW TO DOWNLOAD ─────────────────────────────────────────────── */
.vs-how {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 24px 28px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,40,.06);
}
.vs-how h2 { font-size:1.22rem; font-weight:700; text-align:center; margin:0 0 26px; color:var(--text); }
.vs-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.vs-step { text-align:center; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:28px 16px 22px; transition:transform .2s,box-shadow .2s; }
.vs-step:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(224,32,32,.08); }
.vs-num { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--red); color:#fff; font-weight:800; font-size:1.1rem; border-radius:50%; margin-bottom:14px; box-shadow:0 4px 12px rgba(224,32,32,.28); }
.vs-step strong { display:block; font-size:.91rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.vs-step p { font-size:.80rem; color:var(--text-soft); line-height:1.65; margin:0; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE — Fixed layout, 10px side padding
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 10px left/right padding as requested */
  .vs-wrap {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 32px;
  }

  .vs-card { padding: 14px; }
  .vs-how  { padding: 22px 14px 20px; }

  /* Stack input above Download button */
  .vs-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  /* Input takes full width — paste button stays inside */
  .vs-iwrap { width: 100%; }
  .vs-input {
    width: 100%;
    padding-right: 86px; /* room for Paste button */
  }

  /* Download button full width, proper height */
  .vs-dl-btn {
    width: 100%;
    min-width: 0;
    height: 50px;
    border-radius: 50px; /* pill shape matches screenshot */
    font-size: .96rem;
  }

  /* Results */
  .vs-media { flex-direction: column; }
  .vs-thumb-wrap { width: 100%; aspect-ratio: 16/9; }
  .vs-fmts { grid-template-columns: 1fr; }

  /* Skeleton */
  .vs-skel-row { flex-direction: column; }
  .vs-skel-thumb { width: 100%; height: 170px; }
  .vs-skel-btns { grid-template-columns: 1fr; }

  /* How-to steps stack vertically on mobile */
  .vs-steps { grid-template-columns: 1fr; gap: 10px; }
  .vs-step { padding: 20px 14px 16px; }
  .vs-how h2 { font-size: 1.08rem; margin-bottom: 18px; }
}

@media (max-width: 360px) {
  .vs-num { width: 38px; height: 38px; font-size: .95rem; }
}