/**
 * AamirSEOTools — Built-in SEO Tools UI Styles
 * Covers all 6 tools: YouTube Tags, DA Checker, Spam Score,
 * Backlinks, Domain Age, Social Signals
 *
 * @package AamirSEOTools
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
.ast-tool-wrap {
    background: var(--ast-bg-color);
    border: 1px solid var(--ast-border-color);
    border-radius: calc(var(--ast-border-radius) * 2);
    overflow: hidden;
    box-shadow: var(--ast-shadow-md);
    margin: 2rem 0;
    font-family: var(--ast-font-family);
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.ast-tool-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
    border-bottom: 1px solid var(--ast-border-color);
}

.ast-tool-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--ast-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.ast-tool-icon--red    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ast-tool-icon--blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.ast-tool-icon--orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.ast-tool-icon--purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.ast-tool-icon--green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.ast-tool-icon--indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.ast-tool-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ast-heading-color);
    margin: 0 0 .25rem;
    line-height: 1.25;
}
.ast-tool-desc {
    font-size: .9rem;
    color: var(--ast-text-light);
    margin: 0;
}

/* ── Form ────────────────────────────────────────────────────────────────────── */
.ast-tool-form {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--ast-border-color);
    background: var(--ast-bg-color);
}

.ast-tool-input-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ast-tool-input-group > label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--ast-heading-color);
}

.ast-tool-input-row {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.ast-tool-input {
    flex: 1;
    padding: .75rem 1rem;
    border: 2px solid var(--ast-border-color);
    border-radius: var(--ast-border-radius);
    font-size: .95rem;
    font-family: inherit;
    color: var(--ast-text-color);
    background: var(--ast-bg-color);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    min-width: 0;
}
.ast-tool-input:focus {
    border-color: var(--ast-primary-color);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.ast-tool-textarea { resize: vertical; min-height: 90px; }

.ast-tool-btn {
    background: var(--ast-primary-color);
    color: #fff;
    border: none;
    padding: .75rem 1.5rem;
    border-radius: var(--ast-border-radius);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, transform .15s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.ast-tool-btn:hover   { background: var(--ast-secondary-color); }
.ast-tool-btn:active  { transform: scale(.97); }
.ast-tool-btn:disabled { opacity: .6; cursor: not-allowed; }

.ast-tool-hint {
    font-size: .8rem;
    color: var(--ast-text-light);
}

/* ── Loading ─────────────────────────────────────────────────────────────────── */
.ast-tool-loading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 2rem;
    font-size: .9rem;
    color: var(--ast-text-light);
}
.ast-tool-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(37,99,235,.15);
    border-top-color: var(--ast-primary-color);
    border-radius: 50%;
    animation: ast-tool-spin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes ast-tool-spin { to { transform: rotate(360deg); } }

/* ── Result pane ─────────────────────────────────────────────────────────────── */
.ast-tool-result { padding: 2rem; }

.ast-tool-error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: var(--ast-border-radius);
    padding: 1rem 1.25rem;
    color: #DC2626;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ast-tool-note {
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: var(--ast-border-radius);
    padding: .75rem 1rem;
    color: #92400E;
    font-size: .8rem;
    margin-bottom: 1.25rem;
}

/* ── Result: Scoreboard (DA, Spam) ───────────────────────────────────────────── */
.ast-result-scorecard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ast-score-item {
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    border-radius: var(--ast-border-radius);
    padding: 1.25rem 1rem;
    text-align: center;
}
.ast-score-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .3rem;
}
.ast-score-label {
    font-size: .78rem;
    color: var(--ast-text-light);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

/* ── Gauge / Meter (Spam Score, DA) ─────────────────────────────────────────── */
.ast-gauge-wrap {
    text-align: center;
    margin: 1.5rem auto;
    max-width: 320px;
}
.ast-gauge-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .75rem;
}
.ast-progress-bar {
    background: var(--ast-border-color);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
    margin: .5rem 0;
}
.ast-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .8s ease;
}

/* ── Check list (Spam Score) ─────────────────────────────────────────────────── */
.ast-checks-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.25rem;
}
.ast-check-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: var(--ast-border-radius);
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    font-size: .875rem;
}
.ast-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 800;
    margin-top: .05rem;
}
.ast-check-icon.safe   { background: #D1FAE5; color: #065F46; }
.ast-check-icon.warn   { background: #FEF3C7; color: #92400E; }
.ast-check-icon.danger { background: #FEE2E2; color: #991B1B; }
.ast-check-icon.skip   { background: #F3F4F6; color: #6B7280; }
.ast-check-label       { font-weight: 600; color: var(--ast-heading-color); }
.ast-check-result      { color: var(--ast-text-light); }

/* ── Tags Grid (YouTube) ─────────────────────────────────────────────────────── */
.ast-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}
.ast-tag-badge {
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    color: var(--ast-text-color);
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s;
    user-select: all;
}
.ast-tag-badge:hover {
    background: var(--ast-primary-color);
    color: #fff;
    border-color: var(--ast-primary-color);
}

.ast-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    padding: .45rem 1rem;
    border-radius: var(--ast-border-radius);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ast-text-color);
    transition: all .15s;
}
.ast-copy-all-btn:hover { background: var(--ast-primary-color); color: #fff; border-color: var(--ast-primary-color); }

/* ── Channel info card (YouTube) ─────────────────────────────────────────────── */
.ast-channel-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ast-bg-secondary);
    border-radius: var(--ast-border-radius);
    border: 1px solid var(--ast-border-color);
    margin-bottom: 1.25rem;
}
.ast-channel-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ast-channel-name   { font-weight: 700; font-size: 1rem; }
.ast-channel-stats  { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .35rem; }
.ast-channel-stat   { font-size: .8rem; color: var(--ast-text-light); }
.ast-channel-stat strong { color: var(--ast-heading-color); font-weight: 700; }

/* ── DA Bulk table ───────────────────────────────────────────────────────────── */
.ast-da-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.ast-da-table th {
    background: var(--ast-bg-secondary);
    padding: .75rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ast-text-light);
    border-bottom: 2px solid var(--ast-border-color);
}
.ast-da-table td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--ast-border-color);
    vertical-align: middle;
}
.ast-da-table tr:last-child td { border-bottom: none; }
.ast-da-table tr:hover td { background: var(--ast-bg-secondary); }
.ast-da-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    border-radius: 6px;
    font-weight: 800;
    font-size: .85rem;
    color: #fff;
    padding: 0 .5rem;
}
.ast-mini-bar {
    width: 80px;
    height: 6px;
    background: var(--ast-border-color);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-left: .4rem;
}
.ast-mini-bar-fill { height: 100%; border-radius: 3px; }

/* ── Domain Age info grid ────────────────────────────────────────────────────── */
.ast-domain-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ast-info-item {
    padding: 1rem;
    background: var(--ast-bg-secondary);
    border-radius: var(--ast-border-radius);
    border: 1px solid var(--ast-border-color);
}
.ast-info-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ast-text-light);
    margin-bottom: .35rem;
}
.ast-info-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ast-heading-color);
    word-break: break-word;
}
.ast-info-value.expired { color: #ef4444; }
.ast-info-value.warn    { color: #f59e0b; }

.ast-ns-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .5rem;
}
.ast-ns-list li {
    font-size: .82rem;
    font-family: 'Courier New', monospace;
    color: var(--ast-text-color);
    background: var(--ast-bg-secondary);
    padding: .2rem .5rem;
    border-radius: 4px;
    border: 1px solid var(--ast-border-color);
}

/* ── Social Signals grid ─────────────────────────────────────────────────────── */
.ast-social-total {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--ast-primary-color), var(--ast-secondary-color));
    border-radius: var(--ast-border-radius);
    color: #fff;
    margin-bottom: 1.5rem;
}
.ast-social-total-number {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}
.ast-social-total-label {
    font-size: .9rem;
    opacity: .85;
    margin-top: .35rem;
}
.ast-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.ast-social-platform {
    padding: 1.25rem 1rem;
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    border-radius: var(--ast-border-radius);
    text-align: center;
    transition: box-shadow .2s, transform .2s;
}
.ast-social-platform:hover { box-shadow: var(--ast-shadow-md); transform: translateY(-2px); }
.ast-social-platform-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .6rem;
    color: #fff;
}
.ast-social-platform-count {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ast-heading-color);
    line-height: 1;
}
.ast-social-platform-name { font-size: .8rem; color: var(--ast-text-light); margin-top: .3rem; }
.ast-social-platform-label { font-size: .72rem; color: var(--ast-text-light); }

/* ── Backlinks result ────────────────────────────────────────────────────────── */
.ast-backlinks-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ast-backlinks-stat {
    padding: 1.25rem 1rem;
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    border-radius: var(--ast-border-radius);
    text-align: center;
}
.ast-backlinks-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ast-primary-color);
    line-height: 1;
}
.ast-backlinks-stat-label { font-size: .78rem; color: var(--ast-text-light); margin-top: .4rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.ast-dofollow-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--ast-bg-secondary);
    border-radius: var(--ast-border-radius);
    padding: 1rem 1.25rem;
    border: 1px solid var(--ast-border-color);
    margin-bottom: 1rem;
}
.ast-dofollow-bar-track { flex: 1; height: 10px; background: #ef4444; border-radius: 5px; overflow: hidden; }
.ast-dofollow-bar-fill  { height: 100%; background: #22c55e; border-radius: 5px; transition: width .8s ease; }

/* ── Source badge ────────────────────────────────────────────────────────────── */
.ast-result-source {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--ast-text-light);
    background: var(--ast-bg-secondary);
    border: 1px solid var(--ast-border-color);
    border-radius: 999px;
    padding: .25rem .75rem;
    margin-top: 1.25rem;
}

/* ── Export / Copy bar ───────────────────────────────────────────────────────── */
.ast-tool-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ast-border-color);
}
.ast-tool-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--ast-border-radius);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ast-border-color);
    background: var(--ast-bg-secondary);
    color: var(--ast-text-color);
    transition: all .15s;
}
.ast-tool-action-btn:hover { background: var(--ast-primary-color); color: #fff; border-color: var(--ast-primary-color); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ast-tool-header { flex-direction: column; padding: 1.25rem; }
    .ast-tool-form   { padding: 1.25rem; }
    .ast-tool-result { padding: 1.25rem; }
    .ast-tool-input-row { flex-direction: column; }
    .ast-tool-btn   { width: 100%; justify-content: center; }
    .ast-da-table   { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ast-result-scorecard { grid-template-columns: 1fr 1fr; }
    .ast-social-grid { grid-template-columns: 1fr 1fr; }
}