/*
Theme Name: TikGrab
Theme URI: https://your-website.com
Author: Ops Dev
Author URI: https://your-website.com
Description: A simple and fast TikTok video downloader theme.
Version: 1.0.0
*/
:root{
    --bg:#f7fafc;
    --card:#ffffff;
    --primary:#2c3e50;
    --accent:#354b60;
    --muted:#6b7280;
    --text:#0f172a;
    --success:#059669;
    --danger:#ef4444;
    --max-width:1100px;
    --radius:10px;
    --gap:20px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  * {box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:linear-gradient(180deg,var(--bg),#ffffff 60%);color:var(--text);line-height:1.45;}
  .container{max-width:var(--max-width);margin:32px auto;padding:24px;}
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);}
  .logo{width:48px;height:48px;color:white;background:linear-gradient(90deg,var(--accent),var(--primary));display:grid;place-items:center;border-radius:12px;flex:0 0 48px;}
  .logo svg{width:28px;height:28px;margin-top: 8px;fill:#fff}
  .brand h1{font-size:18px;margin:0;line-height:1}
  .brand p{font-size:12px;margin:0;color:var(--muted)}
  nav{display:flex;gap:12px;align-items:center}
  .nav-link{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:14px;}
  .nav-cta{padding:10px 14px;border-radius:10px;background:var(--primary);color:white;text-decoration:none;font-weight:600;}
  .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;margin-bottom:28px;}
  .hero-left h2{margin:0 0 12px 0;font-size:28px;}
  .hero-left p.lead{margin:0 0 18px 0;color:var(--muted);}
  .card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid rgba(15,23,42,0.04);}
  .input-row{display:flex;gap:12px;margin-bottom:12px;}
  .input-row input[type="url"]{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(15,23,42,0.08);font-size:14px;outline:none;}
  .btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px;}
  .btn-primary{background:var(--primary);color:white;}
  .btn-accent{background:var(--accent);color:white;}
  .btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(15,23,42,0.06);}
  .result{margin-top:12px;display:flex;flex-wrap: wrap;gap:12px;align-items:center;}
  .thumb{width:100%;height:100%;border-radius:8px;background:linear-gradient(90deg,#f0f9ff,#ecfeff);display:grid;place-items:center;font-weight:700;color:var(--accent);flex:0 0 92px;}
  .meta{flex:1}
  .meta h3{margin:0;font-size:15px}
  .meta p{margin:6px 0 0 0;color:var(--muted);font-size:13px}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0;}
  .feature{padding:14px;border-radius:12px;background:var(--card);border:1px solid rgba(15,23,42,0.04);display:flex;gap:12px;align-items:flex-start;}
  .feature svg{width:36px;height:36px;flex:0 0 36px}
  .workflow{display:flex;gap:12px;margin-top:10px;}
  .step{flex:1;padding:12px;border-radius:10px;background:var(--card);text-align:center;border:1px solid rgba(15,23,42,0.04);}
  .step h4{margin:8px 0 0 0;font-size:14px}
  .step p{margin:6px 0 0 0;color:var(--muted);font-size:13px}
  .faq{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .qa{padding:14px;border-radius:10px;background:var(--card);border:1px solid rgba(15,23,42,0.04);}
  .qa h5{margin:0 0 8px 0;font-size:15px}
  .qa p{margin:0;color:var(--muted);font-size:13px}
  footer{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:13px;}
  @media (max-width:980px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.workflow{flex-direction:column}.faq{grid-template-columns:1fr}}
  @media (max-width:520px){
    .grid{grid-template-columns:1fr}
    .step{padding:20px;border-radius:20px}
    .step h4{font-size:13px;margin-top:4px;}.step p{font-size:12px;}
    .step svg{width:50px;height:50px;}
    .result{flex-direction: column; align-items: stretch; text-align: center;}
    .thumb {margin-left: auto; margin-right: auto;}
    .meta {text-align: center;}
    .meta h3, .meta p {text-align: center;}
    .meta div {flex-direction: column; gap: 10px; align-items: center;}
    .btn {padding: 12px 14px; gap: 10px; width: 100%;}
  }
  input:focus, .btn:focus, .nav-link:focus{outline:3px solid rgba(14,165,166,0.12);outline-offset:3px}
  .controls{display:flex;gap:8px;align-items:center;}
  .btn-small{padding:8px 10px;border-radius:8px;font-size:13px}
  .badge{padding:6px 8px;border-radius:999px;background:#f1f5f9;font-size:12px;color:var(--muted);}
  ul{padding-left:18px;margin:6px 0 0 0}
  li{margin-bottom:6px}

  /* 🍔 New Mobile Menu & Burger Styles */
  .mobile-menu-btn {
      display: none; /* Hide by default on large screens */
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      z-index: 1000;
  }
  .burger-line {
      width: 24px;
      height: 2px;
      background: var(--text);
      transition: all 0.3s ease-in-out;
  }
  .mobile-menu-btn.active .burger-line:first-child {
      transform: translateY(8px) rotate(45deg);
  }
  .mobile-menu-btn.active .burger-line:nth-child(2) {
      opacity: 0;
  }
  .mobile-menu-btn.active .burger-line:last-child {
      transform: translateY(-8px) rotate(-45deg);
  }

  .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      z-index: 999;
      transform: translateX(100%);
      transition: transform 0.4s ease-in-out;
      padding: 80px 20px;
      font-size: 1.5rem;
      text-align: center;
  }
  .mobile-menu.active {
      display: flex;
      transform: translateX(0);
  }
  .mobile-menu .nav-link, .mobile-menu .nav-cta {
      font-size: 24px;
      padding: 15px 20px;
      width: 100%;
      text-align: center;
      transition: background-color 0.2s ease;
  }
  .mobile-menu .nav-link:hover, .mobile-menu .nav-cta:hover {
      background-color: rgba(0,0,0,0.05);
  }

  /* --- NEW STYLES: Fetch Button Spinner & URL Validation --- */
  
  /* Spinner animation */
  .spinner {
      display: none; /* Controlled by JS */
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid #fff;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      animation: spin 1s linear infinite;
      margin-right: -4px; /* compensate for gap */
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  /* URL Validation Indicator */
  .input-with-icon {
      position: relative;
      flex: 1; 
  }
  .input-with-icon input[type="url"] {
      width: 100%;
      padding-right: 40px; 
  }
  .validation-icon {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      display: none;
  }
  .validation-path {
      transition: d 0.3s ease-in-out; 
      fill: none;
  }

  /* Valid state */
  .url-valid + .validation-icon {
      display: block;
      color: var(--success);
  }
  .url-valid {
      border-color: var(--success) !important;
  }

  /* Invalid state (will show the X path via JS, styled red here) */
  .url-invalid + .validation-icon {
      display: block;
      color: var(--danger);
  }
  .url-invalid {
      border-color: var(--danger) !important;
  }
  
  /* Progress bar styling */
  #progress-bar-container {
      display: none;
      width: 100%;
      background-color: #e0e0e0;
      border-radius: 5px;
      margin-top: 10px;
      height: 10px;
      overflow: hidden;
  }
  #progress-bar {
      width: 0;
      height: 100%;
      background-color: var(--primary);
      /* This transition is now set dynamically in script.js */
  }
  
  /* New Image Slider Styles */
  .image-slider {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
  }
  .slider-content {
      display: flex;
      height: 100%;
      transition: transform 0.5s ease-in-out;
  }
  .slider-slide {
      min-width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .slider-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
  }
  .slider-dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
  }
  .dot {
      width: 8px;
      height: 8px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s ease;
  }
  .dot.active {
      background-color: #fff;
  }

  /* Media queries for responsiveness */
  @media (min-width: 769px) {
    #desktop-nav {
      display: flex;
    }
    .mobile-menu-btn {
      display: none;
    }
    .mobile-menu {
      display: none;
    }
    .meta div {flex-wrap: wrap;}
  }

  @media (max-width: 768px) {
    #desktop-nav {
      display: none;
    }
    .mobile-menu-btn {
      display: flex;
    }
    header {
      position: relative;
    }
    /* 🚀 FIX FOR MOBILE TEXT ISSUE: Hide button texts permanently on mobile */
    #paste-btn .btn-text, #fetch-btn .btn-text {
        display: none !important;
    }
    /* Adjust padding for icon-only buttons */
    #paste-btn, #fetch-btn {
        padding: 10px;
    }
    /* Show text for download buttons */
    #download-btn-mp4 .btn-text, #download-btn-mp3 .btn-text, #download-btn-cover .btn-text {
        display: inline;
        margin-left: 8px;
    }
  }
  
    /* شريط التمرير بالكامل */
::-webkit-scrollbar {
  width: 6px; /* عرض شريط التمرير */
}

/* خلفية شريط التمرير */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* لون الخلفية الفاتح */
  border-radius: 10px;
}

/* مقبض شريط التمرير (الذي تتحرك عليه) */
::-webkit-scrollbar-thumb {
  background: var(--accent); /* لون المقبض الرمادي */
  border-radius: 10px;
}