/*
Theme Name: SSSTikTok
Theme URI: https://ssstiktok.com
Author: Ahmed
Description: Fast, free TikTok video downloader theme for ssstiktok.com. Paste a link, get an HD download with no watermark.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ssstiktok
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  --ink:        #1C1023;   /* near-black plum, matches ssstik brand tone */
  --ink-soft:   #2E1B36;
  --plum:       #472D4E;   /* brand color pulled from ssstik.io meta-theme-color */
  --plum-deep:  #331F39;
  --cyan:       #25F4EE;   /* TikTok accent */
  --pink:       #FE2C55;   /* TikTok accent */
  --violet:     #6D4DF2;   /* hero gradient start */
  --magenta:    #C13BB4;   /* hero gradient end */
  --btn-dark:   #4B2FD6;   /* solid deep-indigo download button */
  --paper:      #FBF9FC;
  --paper-card: #FFFFFF;
  --line:       #E6E0EA;
  --text:       #201526;
  --text-soft:  #5B4E62;
  --text-faint: #8E7F94;
  --good:       #2ECC71;
  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 20px 50px -24px rgba(28,16,35,0.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--cyan); color:var(--ink); }
:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.container{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(28,16,35,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-header .nav-row{
  display:flex; align-items:center; gap:28px;
  padding:16px 24px; max-width:1080px; margin:0 auto;
}
.site-logo{
  display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:21px; color:#fff; white-space:nowrap;
}
.site-logo .mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--cyan), var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:var(--ink); flex-shrink:0;
}
.site-nav{ display:flex; gap:4px; flex:1; }
.site-nav ul{ list-style:none; display:flex; gap:4px; margin:0; padding:0; }
.site-nav a{
  font-size:14px; font-weight:600; color:#D8CEDD;
  padding:9px 14px; border-radius:8px; white-space:nowrap;
  transition:background .15s, color .15s;
}
.site-nav a:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.nav-cta{
  background:linear-gradient(135deg, var(--cyan), var(--pink));
  color:var(--ink) !important; font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:9px; white-space:nowrap;
}
.menu-toggle{ display:none; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; }

/* Language switcher */
.lang-switcher{ position:relative; flex-shrink:0; }
.lang-switcher-btn{
  display:flex; align-items:center; gap:7px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14); color:#fff; font-size:13.5px; font-weight:600;
  padding:9px 14px; border-radius:9px; cursor:pointer; white-space:nowrap;
}
.lang-switcher-btn:hover{ background:rgba(255,255,255,0.16); }
.lang-switcher-btn .chev{ font-size:10px; transition:transform .15s; }
.lang-switcher.is-open .chev{ transform:rotate(180deg); }
.lang-panel{
  display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:200;
  background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 24px 60px -20px rgba(28,16,35,0.45);
  grid-template-columns:repeat(3,1fr); gap:6px 22px; width:420px;
}
.lang-switcher.is-open .lang-panel{ display:grid; }
.lang-option{
  text-align:left; background:none; border:none; cursor:pointer;
  font-size:14px; color:var(--text); padding:8px 6px; border-radius:8px; white-space:nowrap;
}
.lang-option:hover{ background:#F1ECF3; }
.lang-option.is-current{ color:var(--violet); font-weight:700; }
@media (max-width:640px){
  .lang-panel{ width:280px; grid-template-columns:repeat(2,1fr); right:-40px; }
}
@media (max-width:780px){
  .site-nav{ display:none; }
  .menu-toggle{ display:block; }
  .site-nav.is-open{
    display:flex; position:absolute; top:64px; left:0; right:0;
    background:var(--ink); flex-direction:column; padding:12px 24px 20px;
  }
  .site-nav.is-open ul{ flex-direction:column; }
}

/* ==========================================================================
   HERO + DOWNLOADER
   ========================================================================== */
.hero{
  background:linear-gradient(135deg, var(--violet) 0%, var(--magenta) 100%);
  color:#fff; padding:56px 24px 96px; text-align:center;
  position:relative; overflow:hidden;
}
.hero::before, .hero::after{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  filter:blur(90px); opacity:.30; z-index:0;
}
.hero::before{ background:#fff; top:-200px; left:-140px; }
.hero::after{ background:var(--ink); bottom:-220px; right:-160px; }
.hero > *{ position:relative; z-index:1; }
.eyebrow{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; opacity:.85; font-weight:700; margin:0 0 16px;
}
.hero h1{
  font-size:clamp(32px,5.6vw,52px); font-weight:800; line-height:1.14;
  margin:0 auto 16px; max-width:680px; color:#fff;
}
.hero h1 .accent{
  display:block; color:#fff;
}
.hero p.lede{
  max-width:540px; margin:0 auto 32px; color:#F1E9F5; font-size:16.5px; line-height:1.65;
}

/* quick mode pills (TikTok to MP4 / TikTok to MP3) */
.quick-pills{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 auto 22px;
}
.quick-pill{
  border:1.5px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.12);
  color:#fff; font-size:13.5px; font-weight:700; padding:10px 20px; border-radius:999px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .12s;
  display:inline-flex; align-items:center; gap:7px;
}
.quick-pill:hover{ background:rgba(255,255,255,0.2); transform:translateY(-1px); }
.quick-pill.is-active{
  background:#fff; color:var(--violet); border-color:#fff;
}

.downloader-box{
  max-width:640px; margin:0 auto; background:var(--paper-card);
  border-radius:18px; padding:10px; box-shadow:var(--shadow);
  display:flex; gap:8px; flex-wrap:wrap;
}
.downloader-box input[type="text"]{
  flex:1; min-width:200px; border:none; outline:none; background:transparent;
  padding:14px 16px; font-size:15px; color:var(--text);
}
.downloader-box .btn-clear{
  border:none; background:#F1ECF3; color:var(--text-soft); font-size:13px; font-weight:600;
  padding:0 16px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.downloader-box .btn-download{
  border:none; cursor:pointer; font-weight:700; font-size:15px; color:#fff;
  padding:14px 28px; border-radius:12px;
  background:var(--btn-dark);
  transition:transform .12s, opacity .12s, background .12s;
  display:inline-flex; align-items:center; gap:8px;
}
.downloader-box .btn-download:hover{ transform:translateY(-1px); background:#3D22C4; }
.downloader-box .btn-download:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.dl-status{ max-width:640px; margin:14px auto 0; font-size:14px; color:#EADFEF; min-height:20px; }
.dl-status.is-error{ color:#FFB4C4; }

.dl-result{
  max-width:640px; margin:22px auto 0; background:var(--paper-card);
  border-radius:16px; padding:20px; text-align:left; box-shadow:var(--shadow);
  display:none; gap:16px;
}
.dl-result.is-visible{ display:flex; }
.dl-result img{ width:96px; height:128px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.dl-result .meta{ flex:1; min-width:0; }
.dl-result .meta h4{ margin:0 0 6px; font-size:15px; color:var(--text); }
.dl-result .meta p{ margin:0 0 14px; font-size:13px; color:var(--text-faint); }
.btn-primary-download{
  display:inline-flex; align-items:center; gap:9px; width:100%;
  justify-content:center; font-size:14.5px; font-weight:700; color:#fff;
  padding:13px 18px; border-radius:11px; background:var(--btn-dark);
  transition:background .12s, transform .12s;
}
.btn-primary-download:hover{ background:#3D22C4; transform:translateY(-1px); }
.secondary-actions{
  margin-top:12px; text-align:center; font-size:13px; color:var(--text-faint);
}
.secondary-actions a{ color:var(--text-soft); font-weight:600; }
.secondary-actions a:hover{ color:var(--violet); text-decoration:underline; }
.secondary-actions .sep{ margin:0 8px; color:var(--line); }

.trust-strip{
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  margin-top:36px; color:#CBBFD1; font-size:13px; font-weight:600;
}
.trust-strip span{ display:flex; align-items:center; gap:7px; }
.trust-strip .dot{ width:6px; height:6px; border-radius:50%; background:var(--good); }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features{ padding:64px 24px; background:var(--paper); }
.features-grid{
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3,1fr); gap:20px;
}
@media (max-width:760px){ .features-grid{ grid-template-columns:1fr; } }
.feature-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px;
}
.feature-card .icon{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, var(--cyan), var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:14px; color:var(--ink);
}
.feature-card h3{ font-size:16px; margin:0 0 6px; }
.feature-card p{ font-size:13.5px; color:var(--text-soft); line-height:1.6; margin:0; }

/* ==========================================================================
   HOW-TO STEPS
   ========================================================================== */
.howto{ padding:64px 24px; background:var(--paper-card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.howto .container{ max-width:900px; }
.section-head{ text-align:center; margin-bottom:40px; }
.section-head h2{ font-size:clamp(24px,3.5vw,32px); margin:0 0 10px; }
.section-head p{ color:var(--text-soft); font-size:15px; max-width:520px; margin:0 auto; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step{ text-align:center; padding:0 10px; }
.step .step-badge{
  display:inline-block; margin:0 auto 14px; padding:6px 16px; border-radius:999px;
  background:var(--violet); color:#fff; font-weight:800; font-size:12px; letter-spacing:.04em;
}
.step h4{ font-size:15px; margin:0 0 6px; }
.step p{ font-size:13.5px; color:var(--text-soft); line-height:1.6; margin:0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding:64px 24px; background:var(--paper); }
.faq .container{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 4px;
  font-weight:700; font-size:15px; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:20px; color:var(--text-faint); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:0 0 18px; color:var(--text-soft); font-size:14px; line-height:1.7; }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{
  margin:0 24px 64px; max-width:1032px; margin-left:auto; margin-right:auto;
  background:linear-gradient(135deg, var(--ink) 0%, var(--plum) 100%);
  border-radius:20px; padding:48px 32px; text-align:center; color:#fff;
}
.cta-banner h2{ font-size:clamp(22px,3.4vw,28px); margin:0 0 10px; }
.cta-banner p{ color:#D8CEDD; font-size:14.5px; margin:0 0 22px; }
.cta-banner a{
  display:inline-block; font-weight:700; font-size:14px; padding:13px 28px; border-radius:10px;
  background:linear-gradient(135deg, var(--cyan), var(--pink)); color:var(--ink);
}

/* ==========================================================================
   GENERIC PAGE CONTENT
   ========================================================================== */
.page-hero{
  background:linear-gradient(135deg, var(--ink), var(--plum)); color:#fff;
  padding:56px 24px; text-align:center;
}
.page-hero h1{ font-size:clamp(26px,4vw,38px); margin:0; }
.page-content{ max-width:760px; margin:0 auto; padding:56px 24px; line-height:1.8; font-size:15.5px; color:var(--text); }
.page-content h2{ margin-top:2em; font-size:22px; }
.page-content h3{ font-size:17px; }
.page-content a{ color:var(--plum); text-decoration:underline; }

/* contact form */
.contact-form{ display:grid; gap:14px; max-width:560px; margin:32px auto 0; }
.contact-form input, .contact-form textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14.5px; background:#fff;
}
.contact-form button{
  justify-self:start; border:none; cursor:pointer; font-weight:700; font-size:14.5px;
  padding:13px 26px; border-radius:10px; color:var(--ink);
  background:linear-gradient(135deg, var(--cyan), var(--pink));
}

/* ==========================================================================
   BLOG LISTING (home.php / archive.php / search.php)
   ========================================================================== */
.blog-wrap{ padding:56px 24px 72px; }
.blog-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1080px; margin:0 auto;
}
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.blog-card-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:#EFE7F2; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-card-thumb-fallback{
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--violet), var(--magenta));
}
.blog-card-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-date{ font-size:12px; color:var(--text-faint); margin:0; text-transform:uppercase; letter-spacing:.05em; }
.blog-card-title{ font-size:17px; margin:0; line-height:1.35; }
.blog-card-title a{ color:var(--text); }
.blog-card-title a:hover{ color:var(--violet); }
.blog-card-excerpt{ font-size:13.5px; color:var(--text-soft); line-height:1.6; margin:0; flex:1; }
.blog-card-more{ font-size:13px; font-weight:700; color:var(--violet); margin-top:4px; }

.blog-empty{ text-align:center; color:var(--text-soft); padding:40px 0; max-width:1080px; margin:0 auto; }

.pagination{
  display:flex; justify-content:center; gap:10px; margin:44px auto 0; max-width:1080px;
}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px; border-radius:9px;
  border:1.5px solid var(--line); color:var(--text); font-size:13.5px; font-weight:600;
}
.pagination .page-numbers.current{ background:var(--violet); border-color:var(--violet); color:#fff; }
.pagination .page-numbers.dots{ border:none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink); color:#B9AEC0; padding:64px 24px 32px; }
.footer-grid{
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:8px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:22px; color:#fff; margin-bottom:12px; }
.footer-desc{ font-size:13.5px; line-height:1.7; max-width:280px; color:#9E92A6; }
.site-footer h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin:0 0 14px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.site-footer ul a{ font-size:14px; color:#B9AEC0; transition:color .15s; }
.site-footer ul a:hover{ color:#fff; }
.footer-bottom{
  max-width:1080px; margin:44px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#7A6E82;
}

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }