/* ============================================================
   A4 Backlink Index Checker — tool-specific styling.
   Loaded AFTER redirect-checker.css (shared public-tools base),
   so it only adds the index-specific pieces:
     - status panel YES / NO / UNKNOWN colour variants
     - Google-style SERP snippet card
     - "possible causes" checklist
   Design tokens (--neon-cyan, --bg-deep, --clip-card, …) come
   from /static/landing/styles.css via public_base.html.
   ============================================================ */

/* ----------------------------------------------------------------
   Status panel — indexed / not-indexed / unknown
---------------------------------------------------------------- */

.index-status {
    flex-direction: column;
    align-items: flex-start;
}

.status-panel.status-indexed {
    background: rgba(0, 245, 212, 0.08);
    border-color: rgba(0, 245, 212, 0.35);
}

.status-panel.status-not-indexed {
    background: rgba(255, 87, 87, 0.08);
    border-color: rgba(255, 87, 87, 0.4);
}

.status-panel.status-unknown {
    background: rgba(255, 184, 0, 0.08);
    border-color: rgba(255, 184, 0, 0.4);
}

.status-indexed .status-label     { color: #5af0cb; }
.status-not-indexed .status-label { color: #ff8888; }
.status-unknown .status-label     { color: #ffd365; }

/* ----------------------------------------------------------------
   SERP snippet card — Google-style preview
---------------------------------------------------------------- */

.serp-block {
    margin-bottom: 28px;
}

.serp-card {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    clip-path: var(--clip-card);
    max-width: 600px;
}

.serp-url {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-all;
    margin: 0 0 4px;
}

.serp-title {
    font-family: var(--font-body);
    font-size: 18px;
    color: #8ab4f8; /* Google's link blue, dark-mode tuned */
    margin: 0 0 6px;
    line-height: 1.3;
}

.serp-desc {
    font-size: 13px;
    color: var(--text-secondary, #b8c0c8);
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   Possible-causes checklist (not-indexed path)
---------------------------------------------------------------- */

.causes-block {
    margin-bottom: 28px;
}

.causes-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.causes-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary, #b8c0c8);
    line-height: 1.5;
}

.causes-list li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    font-weight: 700;
    font-size: 12px;
    color: #ffd365;
    background: rgba(255, 184, 0, 0.12);
    clip-path: var(--clip-badge);
}

.next-step {
    margin: 0;
}

.next-step .btn-secondary {
    margin-right: 0;
}