/* Hero: sleek, compact, edge-to-edge */
.hero-section {

background: linear-gradient(135deg, #404040 0%, #333333 50%, #2E2E2E 100%) !important;	
	
	padding: 40px 20px;
width: 100vw;
margin-left: calc(-50vw + 50%);
box-sizing: border-box;
}


.container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}

/* Adjusted title spacing */
.hero-title {
font-size: 2.2rem;
font-weight: 700;
color: white;
margin-bottom: 8px;
}

.hero-subtitle {
font-size: 1.125rem;
font-weight: 400;
color: #e0f7fa;
margin-bottom: 24px;
}

/* Tighter input field */
.video-input {
width: 100%;
max-width: 700px;
padding: 14px 60px 14px 18px;
font-size: 1rem;
border: none;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-sizing: border-box; /* Add this line */
}



/* Buttons */
.button-row {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}

.btn {
font-size: 1rem;
font-weight: 600;
padding: 14px 120px;
border-radius: 6px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-download {
background-color: #4CAF50;
color: white;
}

.btn-download:hover {
background-color: #388e3c;
}

.btn-outline {
background-color: white;
color: #333;
border: 2px solid #ccc;
}

.btn-outline:hover {
background-color: #f2f2f2;
}
.spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 8px;
vertical-align: middle;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

<!-- ✅ VInput CSS -->
.input-wrapper {
position: relative; /* This anchors the buttons */
width: 100%;
max-width: 700px;
}



/* Base error box with icon + text */
#error-message {
display: flex; /* flex container so icon+text flow together */
align-items: center; /* center-vertically */
flex-wrap: wrap; /* allow wrapping if needed */
justify-content: center;
padding: 8px 12px;
margin: 12px auto 0;
background: #F44336;
color: #FFFFFF;
font-size: 1.05rem;
font-weight: 600;
border-radius: 4px;
max-width: 90%;
}

/* Always inject the “!” SVG before the text */
#error-message::before {
content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23FFFFFF'%3E%3Cpath%20d='M1%2021h22L12%202%201%2021zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
display: inline-block;
flex-shrink: 0; /* prevent icon from shrinking */
margin-right: 8px;
width: 20px;
height: 20px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
#error-message {
font-size: 0.95rem; /* slightly smaller text */
padding: 6px 10px; /* tighter padding */
}
#error-message::before {
width: 18px;
height: 18px;
margin-right: 6px;
}
}

<!-- Inline CSS Vpreview (for maintainability consider moving this into external files for production) -->
/* Container utilities */
.container { width: 100%; margin: 0 auto; }
.max-w-6xl { max-width: 72rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* Flex & Grid utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.mb-6 { margin-bottom: 1.5rem; }
.mr-4 { margin-right: 1rem; }
.mr-2 { margin-right: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }

/* Typography */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-white { color: #ffffff; }
.text-gray-500 { color: #6b7280; }
.text-blue-500 { color: #3b82f6; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Button styles */
button, .download-button, .download-more, .cancel-button {
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.15s ease;
}
.download-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 1.5rem 0;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
.download-button:hover {
background-color: #388e3c;
transform: scale(1.05);
}
.download-more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 1rem 0;
background-color: #000;
color: white;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.download-more:hover {
background-color: #333;
color: white !important;
}
.download-more,
.download-more:visited,
.download-more:active,
.download-more:focus,
.download-more:hover {
color: white !important;
}
/* Updated Cancel Button Styling */
.cancel-button {
display: block;
margin: 0.5rem auto;
padding: 0.5rem 1rem;
background: transparent;
color: #dc2626;
border: 2px solid #dc2626;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.cancel-button:hover {
background-color: #dc2626;
color: #fff;
}

/* Grid layout */
.grid { display: grid; }
.gap-8 { gap: 2rem; }
.gap-4 { gap: 1rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Card & Glass Card styles */
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; }
.border-gray-200 { border-color: #e5e7eb; }
.bg-white { background-color: #ffffff; }
.p-6 { padding: 1.5rem; }
.p-4 { padding: 1rem; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.overflow-hidden { overflow: hidden; }
.glass-card {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(229, 231, 235, 0.5);
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
border-radius: 0.5rem;
}
.chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
background-color: #eff6ff;
color: #1e40af;
border-radius: 9999px;
}

/* Format selector styles */
.space-y-3 > * + * { margin-top: 0.75rem; }
.format-option { display: flex; position: relative; }
.format-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.format-label {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.15s ease;
}
.format-option.selected .format-label { background-color: #eff6ff; border-color: #bfdbfe; }
.format-option:not(.selected) .format-label:hover { background-color: #f9fafb; }
.format-icon { margin-right: 0.75rem; }
.format-info { flex: 1; }
.format-name { font-weight: 500; }
.format-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280; }
.format-badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
background-color: #f3f4f6;
color: #374151;
border-radius: 9999px;
}

/* Aspect ratio container */
.aspect-ratio-container { position: relative; padding-top: 56.25%; }
.aspect-ratio-container > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Animation */
.animate-fade-up { animation: fadeUp 0.5s ease-out forwards; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* Additional utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bottom-3 { bottom: 0.75rem; }
.right-3 { right: 0.75rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.h-6 { height: 1.5rem; }
.w-6 { width: 1.5rem; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.object-cover { object-fit: cover; }

/* Background gradient */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-black\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-transparent { --tw-gradient-to: transparent; }

/* Transitions */
.transition-all { transition: all 0.15s ease; }
.duration-500 { transition-duration: 500ms; }
.ease-in-out { transition-timing-function: ease-in-out; }

/* Spinner animation */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }


/* Add responsive adjustments */
@media (max-width: 768px) {
.input-wrapper {
max-width: 100%;
}

.video-input {
padding-right: 60px;
}

.input-actions {
right: 8px;
}
}


/* Hide the error container (and its ::before icon) when it’s empty */
#error-message:empty {
display: none;
}




/* === Mobile typography tweak (≤ 600 px) === */
@media (max-width: 600px) {
	
	

/* Headline & sub-headline */
.hero-title { font-size: 1.35rem; }
.hero-subtitle { font-size: 0.80rem; }

/* Slightly smaller text in field & button */
.btn,
.video-input { font-size: 0.9rem; }

/* ── shorter input field ── */
.video-input{
height: 40px; /* ↓ a bit shorter than before */
line-height: 1.2; /* keep text centred vertically */
padding: 8px 60px 8px 18px; /* ↓ tighter vertical padding */
} /* ← this brace was missing */

/* ── trim blue gap under button ── */
.hero-section{
padding-bottom: 16px; /* ↓ was 40 px */
}
} 

/* === VD PATCH: Preview & Gallery === */
.vd-preview-hero {
  display: grid;
  place-items: center;
  background: #0f1419;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.vd-preview-hero img,
.vd-preview-hero video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.vd-media-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px 0;
}
.vd-thumb {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
}
.vd-thumb img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}
.vd-thumb.is-active img {
  outline: 2px solid #1d9bf0;
}
.vd-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
}


/* VD: thumbnail strip + hero */
.vd-media-strip{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  padding:8px;
  overflow-x:auto;
  background:#fff;
  border-top:1px solid #e5e7eb;
}

/* override theme button sizing */
.vd-media-strip .vd-thumb{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:80px !important;
  height:80px !important;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  flex:0 0 auto;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;
}

.vd-media-strip .vd-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.vd-media-strip .vd-thumb.is-active{
  outline:2px solid #3b82f6;
  outline-offset:2px;
}

.vd-media-strip .vd-badge{
  position:absolute;
  left:6px;
  bottom:6px;
  background:rgba(17,24,39,.85);
  color:#fff;
  padding:2px 6px;
  border-radius:999px;
  font:600 .7rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* keep the big hero tidy */
.vd-preview-hero [data-vd-main]{
  display:block;
  width:100%;
  max-height:60vh;
  object-fit:contain;
  background:#000;
}



/* === VD: Desktop & Mobile hero fix (force full media in the 16:9 box) === */
.vd-preview-hero{
  position: relative;         /* anchor for absolutely positioned media */
  background:#000;
  border-radius:12px;
  overflow:hidden;
}

/* Always make the hero 16:9, no reliance on aspect-ratio support */
.vd-preview-hero::before{
  content:"";
  display:block;
  padding-top:56.25%;         /* 16:9 */
}

/* Win against theme/utilities: fill the box and show full image/video */
.vd-preview-hero > img[data-vd-main],
.vd-preview-hero > video[data-vd-main]{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit: contain !important;      /* change to 'cover' if you prefer edge-to-edge cropping */
  object-position: center center !important;
}

/* Optional: tidy tiny phones */
@media (max-width: 480px){
  .vd-media-strip .vd-thumb img{ width:72px; height:72px; }
}





/* =========================
   Thredra — DARK THEME (scoped)
   Applies ONLY when <body> has class "vd-dark"
   ========================= */

/* Global shells go dark */
body.vd-dark,
body.vd-dark .site,
body.vd-dark .site-header,
body.vd-dark .site-footer,
body.vd-dark .site-main,
body.vd-dark .content-area,
body.vd-dark .wp-site-blocks,
body.vd-dark .entry-content,
body.vd-dark .hentry,
body.vd-dark .page,
body.vd-dark .post,
body.vd-dark .container,
body.vd-dark .widget-area,
body.vd-dark .sidebar{
  background:#0a0a0a !important;
  color:#f5f5f5 !important;
  border-color:#222 !important;
}

/* Utilities/cards that often force white */
body.vd-dark .bg-white,
body.vd-dark [class*="bg-white"],
body.vd-dark .rounded-lg.border,
body.vd-dark .shadow-sm{
  background:#111 !important;
  color:#eee !important;
  border-color:#222 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.45) !important;
}

body.vd-dark .text-gray-500{ color:#bdbdbd !important; }

/* --- PREVIEW PAGE bits --- */
body.vd-dark .glass-card{
  background:#0f0f0f !important;
  border-color:#222 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.45) !important;
}
body.vd-dark .format-label{
  background:#0f0f0f !important;
  border-color:#262626 !important;
  color:#e6e6e6 !important;
}
body.vd-dark .format-option.selected .format-label{
  background:#141414 !important; border-color:#3a3a3a !important;
}
body.vd-dark .format-badge{ background:#1f1f1f !important; color:#d0d0d0 !important; }
body.vd-dark .vd-preview-hero{ background:#000 !important; }
body.vd-dark .download-button{
  background:#22c55e !important; color:#0a0a0a !important; border:1px solid #16a34a !important;
}
body.vd-dark .download-button:hover{ background:#16a34a !important; color:#fff !important; }

/* --- DOWN PAGE bits --- */
body.vd-dark .vd-page{
  background:radial-gradient(1200px 600px at 50% -20%, #0f0f0f, #0a0a0a 60%, #080808 100%) !important;
}
body.vd-dark .vd-card{
  background:#111 !important; border-color:#222 !important; box-shadow:0 18px 48px rgba(0,0,0,.5) !important;
}
body.vd-dark .vd-left .vd-media{ background:#000 !important; }
body.vd-dark .vd-meta, body.vd-dark .vd-breadcrumb{ color:#bdbdbd !important; }
body.vd-dark .vd-prep{ background:#0f0f0f !important; border-top-color:#222 !important; }
body.vd-dark .vd-btn.muted{ background:#171717 !important; color:#fff !important; }
body.vd-dark .vd-btn.secondary{ background:#3f3f3f !important; color:#fff !important; }
body.vd-dark .vd-share-title{ color:#a8a8a8 !important; }
body.vd-dark .vd-chip{ background:rgba(20,20,20,.9) !important; }


/* =========================
   INPUT PAGE SAFETY (keeps your gradient)
   These two lines only remove stray white wrappers
   around your hero/form — they do NOT alter your hero colors.
   ========================= */
body:has(.video-url-form) .entry-content > *:not(.hero-section){
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
body:has(.video-url-form) .hero-section .container{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}