/* ============================================================
   SEO Tools Hub Plugin — Frontend CSS
   Includes theme CSS variables + all tool component styles
   ============================================================ */

/* ── CSS Variables (match theme) ─────────────────────────── */
:root {
    --color-primary:    #0057FF;
    --color-primary-dk: #0041CC;
    --color-accent:     #00C2A8;
    --color-accent-dk:  #00967F;
    --color-bg:         #F4F7FF;
    --color-surface:    #FFFFFF;
    --color-border:     #E0E8FF;
    --color-text:       #1A1F36;
    --color-muted:      #6B7280;
    --color-danger:     #EF4444;
    --color-success:    #10B981;
    --color-warning:    #F59E0B;
    --radius-sm:        6px;
    --radius-md:        12px;
    --radius-lg:        20px;
    --shadow-sm:        0 1px 3px rgba(0,87,255,0.08);
    --shadow-md:        0 4px 16px rgba(0,87,255,0.12);
    --shadow-lg:        0 12px 40px rgba(0,87,255,0.16);
    --font-heading:     'Plus Jakarta Sans','Segoe UI',sans-serif;
    --font-body:        'DM Sans','Segoe UI',sans-serif;
    --font-mono:        'JetBrains Mono','Fira Code',monospace;
    --transition:       0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.btn-primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.btn-primary:hover { background:var(--color-primary-dk); border-color:var(--color-primary-dk); color:#fff; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-outline  { background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-outline:hover  { background:var(--color-primary); color:#fff; }
.btn-accent   { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn-accent:hover   { background:var(--color-accent-dk); border-color:var(--color-accent-dk); color:#fff; transform:translateY(-1px); }
.btn-sm  { padding:7px 16px; font-size:13px; }
.btn-lg  { padding:14px 32px; font-size:17px; }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner {
    width:20px; height:20px;
    border:2px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Tool UI input group ──────────────────────────────────── */
.tool-input-group { margin-bottom:20px; }
.tool-input-group label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--color-text); }
.tool-input-group textarea,
.tool-input-group input,
.tool-input-group select {
    width:100%;
    padding:12px 16px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);
    font-size:15px;
    background:var(--color-bg);
    color:var(--color-text);
    transition:border-color var(--transition),box-shadow var(--transition);
    outline:none;
    font-family:var(--font-body);
}
.tool-input-group textarea:focus,
.tool-input-group input:focus,
.tool-input-group select:focus {
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(0,87,255,0.1);
    background:#fff;
}
.tool-input-group textarea { resize:vertical; min-height:120px; }

/* ── Tool result box ──────────────────────────────────────── */
.tool-result-box {
    background:var(--color-bg);
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);
    padding:20px;
    margin-top:20px;
}
.tool-result-box h4 {
    font-size:13px; font-weight:700;
    color:var(--color-muted);
    text-transform:uppercase; letter-spacing:0.06em;
    margin-bottom:12px;
}
.tool-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ── Notices ──────────────────────────────────────────────── */
.sth-notice { padding:14px 20px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; }
.sth-notice-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.sth-notice-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.sth-notice-info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* ── Ad slots ─────────────────────────────────────────────── */
.sth-ad { clear:both; overflow:hidden; margin:16px auto; }
.sth-ad-label { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; text-align:center; margin-bottom:4px; font-weight:600; }
.sth-ad-placeholder { background:#f8fafc; border:2px dashed #e5e7eb; border-radius:8px; padding:16px; font-size:12px; color:#94a3b8; text-align:center; }

/* ================================================================
   WEBSITE / SEO TOOLS — wt-* Classes
   ================================================================ */

.wt-url-row { display:flex; gap:12px; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; }
.wt-url-input { font-size:15px; }
.wt-check-btn { flex-shrink:0; }

.wt-loading {
    display:flex; align-items:center; gap:14px;
    padding:20px 24px;
    background:rgba(0,87,255,.05);
    border:1.5px solid var(--color-border);
    border-radius:12px;
    margin-top:20px;
    font-size:14px; font-weight:600; color:var(--color-muted);
}
.wt-spinner {
    width:24px; height:24px;
    border:3px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin .7s linear infinite;
    flex-shrink:0;
}

.wt-card {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:12px;
    overflow:hidden;
}
.wt-card-header {
    padding:12px 18px;
    background:var(--color-bg);
    border-bottom:1px solid var(--color-border);
    font-size:13px; font-weight:700;
    color:var(--color-muted);
    text-transform:uppercase; letter-spacing:.06em;
}
.wt-card-body  { padding:16px 18px; }
.wt-card-full  { grid-column:1/-1; }

.wt-info-row {
    display:flex; align-items:baseline; justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid var(--color-border);
    font-size:13px; gap:12px;
}
.wt-info-row:last-child { border-bottom:none; }
.wt-info-row span   { color:var(--color-muted); flex-shrink:0; }
.wt-info-row strong { font-weight:700; word-break:break-all; text-align:right; }
.wt-info-row a      { color:var(--color-primary); font-weight:600; word-break:break-all; }

.wt-signal { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.wt-signal:last-child { border-bottom:none; }
.wt-sig-ok   { color:var(--color-text); }
.wt-sig-warn { color:#F59E0B; }
.wt-sig-err  { color:#EF4444; }
.wt-sig-na   { color:var(--color-muted); }

.wt-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:50px; font-size:12px; font-weight:700; }
.wt-badge-ok   { background:#d1fae5; color:#065f46; }
.wt-badge-warn { background:#fef3c7; color:#92400e; }
.wt-badge-err  { background:#fee2e2; color:#991b1b; }
.wt-badge-info { background:#dbeafe; color:#1e40af; }

.wt-score-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:20px;
}
.wt-score-box {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:10px; padding:16px; text-align:center;
}
.wt-score-num   { font-size:28px; font-weight:800; font-family:var(--font-heading); line-height:1; }
.wt-score-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin-top:5px; }

.wt-muted { font-size:13px; color:var(--color-muted); font-style:italic; }
.wt-tag {
    display:inline-block; padding:3px 10px; border-radius:50px;
    font-size:12px; font-weight:700; margin:2px;
    background:rgba(0,87,255,.08); color:var(--color-primary);
    border:1px solid rgba(0,87,255,.15);
}
.wt-plugin-item { padding:7px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.wt-plugin-item:last-child { border-bottom:none; }

.wt-table { width:100%; border-collapse:collapse; font-size:13px; }
.wt-table th { background:var(--color-bg); padding:9px 12px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); border-bottom:1px solid var(--color-border); }
.wt-table td { padding:9px 12px; border-bottom:1px solid var(--color-border); vertical-align:top; word-break:break-word; }
.wt-table tr:last-child td { border-bottom:none; }
.wt-table tr:hover td { background:var(--color-bg); }

.wt-confidence-bar { width:100%; max-width:280px; height:8px; background:var(--color-border); border-radius:50px; overflow:hidden; margin:8px auto 0; }
.wt-confidence-bar > div { height:100%; border-radius:50px; transition:width .6s ease; }

.wt-heading-h1 { font-size:15px; color:#0057FF; font-weight:700; }
.wt-heading-h2 { font-size:14px; color:#10B981; font-weight:600; padding-left:16px; }
.wt-heading-h3 { font-size:13px; color:#8B5CF6; font-weight:600; padding-left:32px; }
.wt-heading-h4 { font-size:12px; color:#F59E0B; font-weight:600; padding-left:48px; }
.wt-heading-h5,.wt-heading-h6 { font-size:12px; color:var(--color-muted); padding-left:64px; }

/* ── Word counter ─────────────────────────────────────────── */
.wc-stat-box {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:10px; padding:14px; text-align:center;
}

/* ── DNS / IAC filter buttons ─────────────────────────────── */
.dns-filter,.iac-filter-btn {
    padding:6px 14px; border:1.5px solid var(--color-border);
    border-radius:50px; font-size:12px; font-weight:700;
    cursor:pointer; background:var(--color-surface);
    color:var(--color-muted); transition:.15s;
}
.dns-filter:hover,.iac-filter-btn:hover,
.dns-filter.active,.iac-filter-btn.active {
    background:var(--color-primary); color:#fff; border-color:var(--color-primary);
}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:768px){
    .wt-score-grid { grid-template-columns:1fr 1fr; }
    .wt-url-row { flex-direction:column; }
    .wt-check-btn { width:100%; justify-content:center; }
}
/* SEO Tools Hub Plugin — Frontend CSS */
*,*::before,*::after{box-sizing:border-box;}
.sth-ad{clear:both;overflow:hidden;margin:16px auto;}
.sth-ad-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;text-align:center;margin-bottom:4px;font-weight:600;}
.sth-ad-placeholder{background:#f8fafc;border:2px dashed #e5e7eb;border-radius:8px;padding:16px;font-size:12px;color:#94a3b8;text-align:center;}