/* ================================================================
   Search Keyword Tracker — Frontend Widget styles
   ================================================================ */

.skt-widget {
    font-family: inherit;
}

/* ---------- Tabs ----------------------------------------------- */
.skt-widget__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.skt-widget__tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}

.skt-widget__tab:hover {
    color: #4f46e5;
}

.skt-widget__tab--active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}

/* ---------- Panel ---------------------------------------------- */
.skt-widget__panel--hidden {
    display: none;
}

/* ---------- Keyword list --------------------------------------- */
.skt-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skt-widget__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 4px;
    gap: 4px 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}

.skt-widget__item:last-child {
    border-bottom: none;
}

.skt-widget__keyword {
    font-size: 13px;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skt-widget__keyword:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.skt-widget__count {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    text-align: right;
}

.skt-widget__bar {
    grid-column: 1 / -1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
}

.skt-widget__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
    border-radius: 2px;
    transition: width .4s ease;
}

.skt-widget__empty {
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
    padding: 16px 0;
}

/* ================================================================
   Responsive
   ================================================================ */

/* Narrow containers / mobile sidebars */
@media (max-width: 480px) {
    .skt-widget__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .skt-widget__tabs::-webkit-scrollbar { display: none; }

    .skt-widget__tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 12px;
    }

    .skt-widget__item {
        gap: 2px 6px;
    }

    .skt-widget__keyword {
        font-size: 12px;
    }

    .skt-widget__count {
        font-size: 11px;
    }
}