/*
Theme Name: TikTok Downloader
Description: بسيط وسريع
Version: 2.0
*/

:root {
    --bg:#fff; --card:#fff; --accent:#fe2c55; --accent-hover:#ef2950;
    --text:#1a1a2e; --text-muted:#888; --input-bg:#f5f5f5;
    --border:#e5e5e5; --success:#00c853; --error:#ff1744;
    --shadow:0 2px 16px rgba(0,0,0,0.06);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg); color:var(--text);
    min-height:100vh; direction:rtl;
    display:flex; flex-direction:column;
}

/* Header */
.site-header {
    padding:16px 20px; display:flex; align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--border);
    background:#fff; position:sticky; top:0; z-index:10;
}
.header-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.header-logo .logo-icon {
    width:36px; height:36px; border-radius:10px;
    background:linear-gradient(135deg,#fe2c55,#25f4ee);
    display:flex; align-items:center; justify-content:center;
}
.header-logo .logo-text {
    font-size:18px; font-weight:800; color:var(--text);
}
.lang-btn {
    padding:6px 14px; border:1px solid var(--border);
    background:#fff; border-radius:20px; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--text-muted);
    display:flex; align-items:center; gap:6px; transition:all .2s;
}
.lang-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Nav */
.header-nav { display:flex; align-items:center; gap:4px; }
.header-nav a {
    padding:7px 12px; border-radius:8px; text-decoration:none;
    font-size:12px; font-weight:600; color:var(--text-muted);
    white-space:nowrap; transition:all .2s;
}
.header-nav a:hover { background:var(--input-bg); color:var(--text); }
.header-nav a.nav-sub {
    background:var(--accent); color:#fff; padding:7px 14px;
}
.header-nav a.nav-sub:hover { background:var(--accent-hover); }
.lang-btn img, .lang-btn svg { width:16px; height:16px; }

/* Hero */
.hero {
    text-align:center; padding:40px 20px 20px;
}
.hero h1 {
    font-size:26px; font-weight:800; margin-bottom:6px;
}
.hero h1 span { color:var(--accent); }
.hero p { color:var(--text-muted); font-size:14px; }

/* Main */
.main-container { flex:1; width:100%; max-width:480px; margin:0 auto; padding:0 20px; }

/* Card */
.card {
    background:var(--card); border:1px solid var(--border);
    border-radius:16px; padding:24px; margin-bottom:20px;
    box-shadow:var(--shadow);
}
.card-title {
    font-size:15px; font-weight:700; margin-bottom:16px;
    color:var(--text);
}

/* Form */
.form-group { margin-bottom:16px; }
.form-group label {
    display:block; font-size:12px; font-weight:600;
    color:var(--text-muted); margin-bottom:6px;
}
.form-group input {
    width:100%; padding:13px 14px; background:var(--input-bg);
    border:1.5px solid var(--border); border-radius:12px;
    color:var(--text); font-size:15px; outline:none;
    transition:all .2s; direction:ltr;
}
.form-group input:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(254,44,85,0.1);
}
.form-group input::placeholder { color:#bbb; }

.btn {
    width:100%; padding:14px; background:var(--accent);
    color:#fff; border:none; border-radius:12px;
    font-size:15px; font-weight:700; cursor:pointer;
    transition:all .2s; display:flex; align-items:center;
    justify-content:center; gap:8px;
}
.btn:hover { background:var(--accent-hover); transform:translateY(-1px); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

.spinner { display:none; width:20px; height:20px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.btn.loading .spinner { display:block; }
.btn.loading .btn-text { display:none; }

/* Alert */
.alert { padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; display:none; }
.alert.show { display:block; }
.alert.success { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }
.alert.error { background:#fbe9e7; color:#c62828; border:1px solid #ffccbc; }
.alert.info { background:#e3f2fd; color:#1565c0; border:1px solid #bbdefb; }

/* Key actions */
.key-actions { margin-top:4px; font-size:12px; }
.free-key-link { color:var(--accent); text-decoration:none; }
.free-key-link:hover { text-decoration:underline; }
.free-key-link.used { color:#bbb; pointer-events:none; }
.free-key-loading { display:none; color:var(--text-muted); }
.key-indicator { display:none; font-size:12px; margin-top:4px; }
.key-indicator.valid { display:block; color:var(--success); }
.key-indicator.invalid { display:block; color:var(--error); }

/* Features */
.features { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.feature {
    padding:14px; border:1px solid var(--border);
    border-radius:12px; text-align:center;
}
.feature .f-icon { font-size:24px; margin-bottom:4px; display:block; }
.feature .f-title { font-size:12px; font-weight:700; color:var(--text); }
.feature .f-desc { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Steps */
.steps { margin-bottom:20px; }
.steps .step {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border:1px solid var(--border);
    border-radius:10px; margin-bottom:8px;
}
.step-num {
    width:26px; height:26px; border-radius:50%;
    background:var(--accent); color:#fff;
    font-size:12px; font-weight:800; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.step-text { font-size:13px; color:var(--text); line-height:1.4; }

/* Footer */
.site-footer {
    text-align:center; padding:20px; border-top:1px solid var(--border);
    color:var(--text-muted); font-size:12px; margin-top:20px;
}
.site-footer a { color:var(--text-muted); text-decoration:none; margin:0 8px; }
.site-footer a:hover { color:var(--accent); }
.site-footer .footer-brand { display:block; margin-bottom:6px; color:#bbb; }

/* WordPress overrides */
#wpadminbar { display:none!important; }
html { margin-top:0!important; }

@media (max-width:480px) {
    .site-header { padding:12px 16px; flex-wrap:wrap; gap:0; }
    .header-logo .logo-text { font-size:16px; }
    .lang-btn { padding:5px 10px; font-size:11px; }
    .lang-btn svg { width:14px; height:14px; }
    .header-nav { order:3; width:100%; justify-content:center; padding-top:10px; gap:4px; }
    .header-nav a { padding:8px 12px; font-size:12px; border-radius:10px; }
    .header-nav a.nav-sub { padding:8px 16px; font-size:12px; }
    .hero { padding:32px 16px 16px; }
    .hero h1 { font-size:22px; }
    .main-container { padding:0 16px; }
    .card { padding:18px; border-radius:14px; }
    .features { grid-template-columns:1fr 1fr; }
}
.dl-counter{margin:10px 0;padding:8px 12px;background:#f8fbfe;border-radius:8px;text-align:center}.dl-counter span{font-size:11px;color:#888}.dl-counter b{color:#333}.dl-bar{height:4px;background:#e8ecf1;border-radius:2px;margin-bottom:6px;overflow:hidden}.dl-fill{height:4px;background:linear-gradient(90deg,#fe2c55,#25f4ee);border-radius:2px;transition:width .4s}