/* ================================
   TikTok Downloader – Horizontal Fixes (WP/Kadence friendly)
   Paste into: Appearance → Customize → Additional CSS
   ================================ */

/* --- Design tokens (fallbacks) --- */
:root{
  --primary-color:#667eea;
  --secondary-color:#764ba2;
  --text-dark:#2d3748;
  --text-light:#718096;
  --border-color:#e2e8f0;
  --success-color:#48bb78;
  --error-color:#f56565;
  --shadow-sm:0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 4px 6px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px rgba(0,0,0,.15);
  --gradient-primary:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);
}

/* --- Wrapper / Container --- */
.tiktok-downloader-wrapper{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:0px 0px;  /* --- Before- padding:40px 20px; --- */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
}
.tiktok-downloader-container{
  width:100%;
  max-width:100%;
  margin:0 auto;
  background:#EDB;
  border-radius:20px;
  padding:40px 30px;
  box-shadow:var(--shadow-xl);
  border:1px solid var(--border-color);
  box-sizing:border-box;
}

/* --- Header (fluid type) --- */
.tiktok-downloader-title{
  font-size:clamp(1.5rem,4vw,2.5rem);
  font-weight:800;
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0 0 12px 0;
  line-height:1.2;
}
.tiktok-downloader-subtitle{
  font-size: clamp(.9rem, 2vw, 1.1rem);
  color: var(--text-light);
  margin: 0;
  line-height: 1.6;
  font-weight: bold;
}

/* --- Form: keep input + button horizontal (wrap on small) --- */
.tt-form{ margin-bottom:30px; }
.tt-input-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
}
.tt-url-input{
  flex:1 1 auto;
  min-width:0;                /* allows shrink beside button */
  width:auto;                 /* not 100% so button can sit inline */
  padding:16px 20px;
  font-size:1rem;
  border:2px solid var(--border-color);
  border-radius:12px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tt-url-input::placeholder{ color:#a0aec0; }
.tt-url-input:focus{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgba(102,126,234,.1);
}
.tt-submit-btn{
  padding:16px 28px;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  background:var(--gradient-primary);
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.tt-submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(102,126,234,.3);
}

/* --- Alerts --- */
.tt-error{
  background:#fff5f5;
  color:#c53030;
  border-left:4px solid var(--error-color);
  padding:15px 20px;
  border-radius:10px;
  margin:20px 0;
  font-size:.95rem;
  line-height:1.5;
}

/* --- Result layout: keep cover left, details right (horizontal) --- */
.tt-result{ margin-top:30px; }
.tt-video-info{
  display:flex;
  align-items:flex-start;
  gap:24px;
  background:#f7fafc;
  border-radius:15px;
  padding:24px;
  margin-bottom:24px;
  border:2px solid var(--border-color);
}
.tt-cover{
  width:clamp(140px,22vw,180px);
  aspect-ratio:9/16;
  height:auto;
  object-fit:cover;
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  flex:0 0 auto;
}
.tt-details{
  flex:1 1 auto;
  min-width:0;
}
.tt-details h3{
  font-size:clamp(1.1rem,1.5vw + .7rem,1.5rem);
  color:var(--text-dark);
  margin:0 0 12px 0;
  font-weight:700;
  line-height:1.35;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.tt-details p{
  color:var(--text-light);
  font-size:clamp(.85rem,1.8vw,.95rem);
  margin:0 0 12px 0;
}

/* --- HORIZONTAL META: labels/values on one line with wrap --- */
.tt-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 20px;              /* row/column gaps */
}
.tt-field{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;         /* keeps "User: @abc" together */
}
.tt-field .tt-label{
  color:var(--text-light);
  font-weight:600;
}
.tt-field .tt-value{
  color:var(--text-dark);
  font-weight:600;
}
.tt-row .tt-sep{
  color:var(--text-light);
  opacity:.6;
  margin:0 2px;
}

/* --- Generic fallback: make any inline meta horizontal --- */
.tt-details p.meta-line,
.tt-inline,
.tt-fields,
.tt-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}
.tt-details p.meta-line > *,
.tt-inline > *,
.tt-fields > *,
.tt-stats > *{
  flex:0 0 auto;
  min-width:0;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
}

/* --- Stats as chips (horizontal) --- */
.tt-stats span{
  background:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-size:.9rem;
  color:var(--text-light);
  border:1px solid var(--border-color);
  font-weight:500;
}

/* --- Download actions: row on desktop, stack on small --- */
.tt-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* Base button styles */
.tt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  text-decoration:none;
  border-radius:12px;
  font-weight:700;
  font-size:1rem;
  transition:transform .15s ease, box-shadow .2s ease;
  cursor:pointer;
  border:none;
  text-align:center;
  flex:1 0 220px;
  min-width:200px;
}
.tt-btn svg{ width:20px; height:20px; }

/* >>> Requested change: add 10% TOP MARGIN to both download buttons <<< */
.tt-actions .tt-btn{
  margin-top:10%;
}

.tt-btn-primary{
  background:var(--gradient-primary);
  color:#fff;
}
.tt-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(102,126,234,.3);
}
.tt-btn-hd{
  background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
  color:#fff;
}
.tt-btn-hd:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(240,147,251,.3);
}
.tt-btn-audio{
  background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);
  color:#fff;
}
.tt-btn-audio:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(67,233,123,.3);
}
.tt-btn-secondary{
  background:#fff;
  color:var(--primary-color);
  border:2px solid var(--primary-color);
}
.tt-btn-secondary:hover{
  background:var(--primary-color);
  color:#fff;
}

/* --- Instructions & Features (grid, responsive) --- */
.tiktok-instructions{
  background:linear-gradient(135deg, rgba(102,126,234,.05) 0%, rgba(118,75,162,.05) 100%);
  border-radius:15px;
  padding:40px;
  margin-top:40px;
}
.tiktok-instructions h3{
  font-size:clamp(1.2rem,1.2vw + .9rem,1.6rem);
  color:var(--text-dark);
  margin-bottom:25px;
  font-weight:800;
  text-align:center;
}
.tiktok-instructions ol{
  list-style:none;
  padding:0;
  display:grid;
  gap:20px;
}
.tiktok-instructions li{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:20px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border-color);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.tiktok-instructions li:hover{
  transform:translateX(5px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary-color);
}
.step-number{
  width:40px;
  height:40px;
  background:var(--gradient-primary);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:1.05rem;
  flex-shrink:0;
}
.step-content{ flex:1; }
.step-content strong{
  color:var(--primary-color);
  font-weight:700;
  font-size:1.05rem;
  display:block;
  margin-bottom:5px;
}
.step-content p{
  color:var(--text-light);
  margin:0;
  line-height:1.5;
  font-size:.95rem;
}
.tiktok-features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
  margin-top:40px;
}
.feature-item{
  text-align:center;
  padding:30px 25px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border-color);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-item:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--primary-color);
}
.feature-icon{ font-size:3rem; margin-bottom:15px; }
.feature-item h4{
  font-size:1.2rem;
  color:var(--text-dark);
  margin-bottom:10px;
  font-weight:600;
}
.feature-item p{
  font-size:.95rem;
  color:var(--text-light);
  margin:0;
  line-height:1.6;
}

/* --- Responsive paddings --- */
@media (max-width:1024px){
  .tiktok-downloader-container{ padding:35px 25px; }
}
@media (max-width:768px){
  .tiktok-downloader-container{ padding:25px 18px; }
  .tt-input-group{ flex-direction:column; }
  .tt-url-input{ width:100%; }
  .tt-video-info{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .tt-actions{ flex-direction:column; }
  .tt-btn{ width:100%; min-width:0; }
  .tt-cover{ width:100%; max-width:280px; }
}
@media (max-width:480px){
  .tiktok-downloader-container{ padding:20px 15px; }
  .tt-cover{ max-width:240px; }
}

/* --- Print --- */
@media print{
  .tt-submit-btn, .tt-actions, .tt-form{ display:none !important; }
}

/* --- Helpers for long text (avoid vertical overflow) --- */
.tt-details h3, .tt-details p, .tt-details a{
  overflow-wrap:anywhere;
  word-break:break-word;
}