/*
 * SERP Empire custom UI styles (cacheable, loaded globally).
 *
 * Consolidated here from per-page <style> blocks so the browser can cache them
 * instead of re-downloading the rules with every page render. All selectors are
 * scoped (page-specific class/id prefixes), so loading this everywhere is safe.
 *
 * Cache-busting: bump the filename version (serp-ui-YYYYMMDD.css) and update the
 * <link> in resources/views/layouts/app.blade.php whenever this file changes.
 */

/* ── Alpine: hide elements until Alpine has initialised ── */
[x-cloak] { display: none !important; }

/* ── Google Places autocomplete inside a Bootstrap modal ──
   The suggestions dropdown must sit above the modal (z-index ~1050), otherwise it
   renders behind it and the location field looks broken. */
.pac-container { z-index: 10000 !important; }

/* ── Create-a-campaign: search-engine type cards ── */
.search-engine { margin-bottom: 8px; }

.search-engine .col-md-6 { margin-bottom: 18px; }

.search-engine .kt-option {
    height: 100%;
    margin: 0;
    padding: 18px 20px;
    border: 1.5px solid #ebedf2;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    align-items: center;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.search-engine .kt-option:hover {
    border-color: #b9c2ff;
    box-shadow: 0 4px 16px rgba(93, 120, 255, .10);
}

/* Selected card (the label that contains the checked radio). */
.search-engine label.kt-option:has(input:checked) {
    border-color: #5d78ff;
    background: #f4f6ff;
    box-shadow: 0 0 0 3px rgba(93, 120, 255, .12);
}

.search-engine .kt-option__label { padding-left: 14px; }

.search-engine .kt-option__head { align-items: center; }

.search-engine .kt-option__title {
    font-size: 15px;
    font-weight: 600;
    color: #48465b;
}

.search-engine .kt-option__body {
    font-size: 13px;
    color: #a2a5b9;
    margin-top: 2px;
}

/* Engine logo sits flush-right in the card head. */
.search-engine .kt-option__focus { margin-left: auto; }

/* ── Campaign settings page (backend/campaign/settings) ──
   Sections with their title and explanation on the left and their fields on the right,
   and a save bar that stays at the bottom of the window. */
.se-section {
    padding: 30px 0;
    border-top: 1px solid #ebedf2;
}

.se-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.se-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #282a3c;
}

.se-section__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #646c9a;
}

@media (max-width: 991.98px) {
    .se-section__intro { margin-bottom: 22px; }
}

.se-section .form-group > label,
.se-section .se-field__text > label {
    font-size: 14px;
    font-weight: 600;
    color: #282a3c;
}

.se-section .se-field__text > label {
    display: block;
    margin: 0 0 3px;
}

.se-engine {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 5px 14px 5px 5px;
    border: 1px solid #ebedf2;
    border-radius: 999px;
    background: #f7f8fa;
    font-size: 13px;
    font-weight: 500;
    color: #48465b;
}

.se-learn {
    font-weight: 500;
    white-space: nowrap;
}

/* One setting: a label with a line of explanation, then its control */
.se-field + .se-field { margin-top: 30px; }

.se-field--divided {
    padding-top: 26px;
    border-top: 1px solid #ebedf2;
}

.se-field__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 12px;
}

.se-field--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;
}

.se-field--row .kt-switch { flex-shrink: 0; }

@media (max-width: 767.98px) {
    .se-field--row:has(.se-choices) { flex-wrap: wrap; }
}

.se-field__text {
    flex: 1 1 280px;
    max-width: 540px;
}

.se-field__label {
    display: block;
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    color: #282a3c;
}

.se-field__desc {
    font-size: 13px;
    line-height: 1.55;
    color: #646c9a;
}

.se-field__desc--below { margin-top: 10px; }

.se-field__value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    color: #282a3c;
}

/* A percentage picked on a slider */
.se-range {
    display: block;
    width: 100%;
    height: 24px;
    margin: 0;
    accent-color: #5d78ff;
    cursor: pointer;
}

.se-range__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: #646c9a;
}

/* Radio buttons shown as a row of buttons, the checked one in the brand colour */
.se-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.se-choice {
    position: relative;
    margin: 0;
}

.se-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.se-choice > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 62px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #e2e5ec;
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 500;
    color: #48465b;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.se-choice--narrow > span { min-width: 48px; }

.se-choice:hover > span { border-color: #b9c2ff; }

.se-choice input:checked + span {
    border-color: #5d78ff;
    background: #f4f6ff;
    color: #2c3fb1;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(93, 120, 255, .12);
}

.se-choice input:focus-visible + span {
    outline: 2px solid #5d78ff;
    outline-offset: 2px;
}

.se-choice input:disabled + span {
    border-color: #ebedf2;
    background: #f7f8fa;
    color: #a2a5b9;
    cursor: not-allowed;
}

.se-upgrade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #ebedf2;
    border-radius: 8px;
    background: #f7f8fa;
    font-size: 13px;
    color: #48465b;
}

/* The slow increase, while it applies */
.se-ramp {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    padding: 16px 18px;
    border: 1px solid #f3d38c;
    border-radius: 10px;
    background: #fff8eb;
    color: #6b4500;
}

.se-ramp__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffe8b8;
    font-size: 1.4rem;
}

.se-ramp__body {
    flex: 1 1 auto;
    min-width: 0;
}

.se-ramp__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    font-weight: 600;
}

.se-ramp__bar {
    height: 6px;
    margin: 8px 0;
    border-radius: 999px;
    background: #f3e0b5;
    overflow: hidden;
}

.se-ramp__bar > div {
    height: 100%;
    border-radius: 999px;
    background: #c47f00;
}

.se-ramp__text {
    font-size: 13px;
    line-height: 1.5;
}

.se-ramp__text a,
.se-ramp__text a:hover {
    color: #6b4500;
    text-decoration: underline;
}

.btn.se-ramp__skip {
    flex-shrink: 0;
    border: 1px solid #d9a93f;
    background: #fff;
    color: #6b4500;
}

.btn.se-ramp__skip:hover {
    background: #fff3d6;
    color: #6b4500;
}

@media (max-width: 575.98px) {
    .se-ramp { flex-wrap: wrap; }
}

/* Traffic during the week: one bar per day, dragged up and down. A visually hidden range
   input under each bar carries the value, the keyboard and the screen reader label. */
.se-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.se-preset {
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid #e2e5ec;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #48465b;
    cursor: pointer;
}

.se-preset:hover { border-color: #b9c2ff; }

.se-preset--active {
    border-color: #5d78ff;
    background: #f4f6ff;
    color: #2c3fb1;
    font-weight: 600;
}

.se-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 20px 14px;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #f7f8fa;
}

.se-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.se-day__value {
    font-size: 13px;
    font-weight: 600;
    color: #282a3c;
}

.se-day__bar {
    position: relative;
    width: 100%;
    max-width: 56px;
    height: 130px;
    border-radius: 8px;
    background: #e4e8f4;
    overflow: hidden;
    cursor: ns-resize;
    touch-action: none;
}

.se-day__fill {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px 8px 0 0;
    background: #5d78ff;
}

.se-day:focus-within .se-day__bar { box-shadow: 0 0 0 3px rgba(93, 120, 255, .35); }

.se-day__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.se-day__label {
    font-size: 12.5px;
    color: #646c9a;
}

.se-cap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
    color: #48465b;
}

.se-cap .form-control { width: 160px; }

.se-blocked {
    margin-top: 14px;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

.se-hints {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #646c9a;
}

/* Sticks to the bottom of the window while the form is taller than it */
.kt-portlet__foot.se-savebar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(40, 42, 60, .06);
}

.se-savebar__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #646c9a;
}

.se-savebar__status .la {
    margin-right: 6px;
    font-size: 1.2rem;
    vertical-align: -2px;
    color: #0a8f69;
}

.se-savebar__dirty { color: #8a5300; }

.se-savebar__dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e39b00;
}

.se-savebar__actions {
    display: flex;
    gap: 10px;
}

/* ── Campaign target fields (components/campaign-target-fields) ── */
.se-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
}

.se-callout > .la {
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1.1;
}

.se-callout--warning {
    border: 1px solid #f3d38c;
    background: #fff8eb;
    color: #6b4500;
}

.se-rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #dfe4fb;
    border-radius: 8px;
    background: #f4f6ff;
}

.se-rule__icon {
    font-size: 1.4rem;
    line-height: 1.1;
    color: #5d78ff;
}

.se-rule__label {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #3d4f9f;
}

.se-rule__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #282a3c;
}

.se-rule__text strong { font-weight: 600; }

/* ── Add-a-country modal ── */
#addCountryModal .modal-body { padding: 24px 28px; }

#addCountryModal .add-country-intro {
    font-size: 13px;
    color: #a2a5b9;
    margin-bottom: 20px;
}

#addCountryModal label {
    font-weight: 600;
    color: #48465b;
}

#addCountryModal .add-country-target {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

#addCountryModal .add-country-target .badge {
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid #ebedf2;
}

/* select2 should match the Metronic input height inside the modal */
#addCountryModal .select2-container .select2-selection--single {
    height: calc(1.5em + 1.3rem + 2px);
    display: flex;
    align-items: center;
}

/* ── Moved from layouts/app.blade.php <head> (already global) ── */
.kt-notification .notification-item:after { content: none; }

.flex-row.row {
    display: flex;
    flex-wrap: wrap;
}

.flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.flex-row.row:after,
.flex-row.row:before {
    display: flex;
}

option:not(:checked) { background-color: #fff; }

/* ── Portlet header with action toolbar (campaign / country header partials) ──
   Scoped so other portlets/tabs (e.g. the profile page tabs) are unaffected. */
.kt-portlet__head { position: relative; }

/* nowrap the head label only when the header carries the action toolbar */
.kt-portlet__head:has(.kt-portlet__head-toolbar-btn) .kt-portlet__head-label,
.campaign-header.kt-portlet__head-label {
    white-space: nowrap;
    overflow: hidden;
}

.kt-portlet__head-toolbar-btn {
    display: flex;
    position: absolute;
    top: 0;
    right: 25px;
    bottom: 0;
    align-items: center;
    align-content: flex-end;
}

.kt-portlet__head-toolbar-btn::before {
    display: block;
    content: '';
    width: 3em;
    height: 100%;
    background-image: linear-gradient(to left, white 0%, transparent 100%);
}

/* header tabs only (kt-portlet--tabs nested *inside* the head), not body tabs */
.kt-portlet__head .kt-portlet--tabs .nav-item {
    height: 60px;
    max-width: 300px;
}

/* Lighthouse fixes (2026-06): in-text link distinction + heading size parity */
.kt-sc-faq-3 .card-body a { text-decoration: underline; }
.features-list .feature-text h3 { font-size: 1.5rem; line-height: 1.3; }

/* ============================================================
   2026-09: UI review follow-ups (findings 3, 4, 5, 7, 8, 10)
   ============================================================ */

/* ── Searches/day breakdown popover (components/searches-per-day) ── */
button.se-searches-day {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    vertical-align: baseline;
}

.se-breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
    font-size: 12px;
}

.se-breakdown__row--total {
    border-top: 1px solid #ebedf2;
    margin-top: 4px;
    padding-top: 7px;
    font-weight: 600;
    color: #282a3c;
}

/* ── Prioritised account notices (layouts/notices) ── */
.se-notices { margin-bottom: 10px; }

.se-notices__more {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #5e6278;
    border-bottom: 1px dashed #b5b8c8;
    margin-bottom: 12px;
}

.se-notices__more:hover { color: #366cf3; border-bottom-color: #366cf3; }

.se-notice { position: relative; }

.se-notice__dismiss {
    position: absolute;
    top: 6px;
    right: 10px;
    padding: 4px 8px;
    line-height: 1;
    opacity: .5;
}

.se-notice__dismiss:hover { opacity: 1; }

/* ── Tables that become labelled cards on small screens ──
   Used by the searches history table and the campaigns list. Each cell carries a
   data-label, so no separate mobile template is needed. */
@media (max-width: 767.98px) {
    .se-searches-table thead {
        display: none;
    }

    .se-searches-table,
    .se-searches-table tbody,
    .se-searches-table tr,
    .se-searches-table td {
        display: block;
        width: 100%;
    }

    .se-searches-table tr {
        border: 1px solid #ebedf2;
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }

    .se-searches-table td {
        border: 0;
        padding: 4px 0;
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: baseline;
        gap: 10px;
    }

    .se-searches-table td::before {
        content: attr(data-label);
        font-size: 10px;
        line-height: 1.6;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #a2a5b9;
        font-weight: 600;
    }
}

/* Long keywords wrap in their own cell instead of stretching the row. */
.se-searches-table__keyword {
    max-width: 0;
    width: 45%;
    overflow-wrap: anywhere;
}

.se-searches-table__date { white-space: nowrap; }

@media (max-width: 767.98px) {
    .se-searches-table__keyword { max-width: none; width: auto; }
}

/* ── Campaigns list controls ── */
.se-list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.se-list-search { width: 200px; }
.se-list-status { width: auto; }

.se-list--loading { opacity: .45; }

/* ── Keyword editor (components/keyword-editor) ── */
.se-keyword-editor__table td,
.se-keyword-editor__table th {
    vertical-align: middle;
    padding: 6px 8px 6px 0;
}

.se-keyword-editor__rate { width: 150px; }
.se-keyword-editor__remove { width: 44px; }

.se-keyword-editor__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.se-keyword-editor__total {
    margin-left: auto;
    font-size: 13px;
    color: #5e6278;
}

.se-keyword-editor__bar {
    flex: 0 0 100%;
    height: 5px;
    border-radius: 3px;
    background: #e6e8ef;
    overflow: hidden;
}

.se-keyword-editor__bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #366cf3;
}

.se-keyword-editor__bar-fill--over { background: #fd3995; }

/* On authenticated app pages the brand is a <div> because the page title carries
   the <h1>. Give it the same box as the <h1> it replaces so the header does not
   shift between the public site and the app. */
.kt-header__brand > .kt-header__brand-heading {
    margin: 0 0 .5rem;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* ── Header credits pill ──
   The balance leads; the runway and rate follow, de-emphasised. Exact figures are
   in the tooltip, so the tail can drop away when the header runs out of room. */
.se-credit-pill__detail {
    opacity: .75;
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .se-credit-pill__detail { display: none; }
}

/* ── Rows that navigate on click (handler in layouts/scripts) ──
   The old markup carried an inline cursor:pointer; this replaces it. Text still
   gets a caret so a row stays selectable. */
tr[data-href] {
    cursor: pointer;
}

tr[data-href] input,
tr[data-href] select,
tr[data-href] textarea {
    cursor: auto;
}

/* ── Search result badges ──
   Metronic sets .kt-badge to display:inline-flex, which makes the label a flex
   item. Flex items shrink below their content width, so "Knowledge Panel" and
   "Local pack: 3" broke across two lines in a narrow Position column. Stop the
   label shrinking and stop it wrapping; a long result overflows rather than
   folding, and .table-responsive scrolls the table if it has to. */
.se-result-badge,
.se-result-badge > * {
    white-space: nowrap;
    flex-shrink: 0;
}

.se-searches-table__position {
    white-space: nowrap;
}

/* ── Searches history: the Settings badges ──
   Device, pages visited and time on site describe one visit, so they belong on one
   line. Left to wrap, the last badge dropped below the others and rows came out at
   different heights. The column claims the width it needs; the keyword column
   yields it, since that one is free to wrap. Below the breakpoint the row becomes a
   stacked card, where wrapping is correct. */
@media (min-width: 768px) {
    .se-searches-table__settings {
        white-space: nowrap;
    }
}

/* ── Search log: the line above the timeline (backend/country/log-head) ──
   The site and the keyword, the outcome as one chip, the date. Replaces the dark alert box
   that repeated what the visit path below says step by step. */
.se-log-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin: 0 0 22px;
    padding: 0 0 16px;
    border-bottom: 1px solid #ebedf2;
    font-size: 13px;
}

.se-log-head__what {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: #5f6378;
}

.se-log-head__site {
    font-size: 15px;
    font-weight: 600;
    color: #212529;
    word-break: break-all;
}

.se-log-head__sep { color: #b5b9cc; }

.se-log-head__keyword { font-weight: 500; color: #3f4254; }

.se-log-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-left: auto;
    color: #5f6378;
}

.se-log-head__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.se-log-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f1f2f7;
    color: #5f6378;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.se-log-chip--ai { background: #eef1ff; color: #3f5bd9; }

.se-log-chip--found { background: #e3f7f0; color: #07875f; }

.se-log-chip--notfound { background: #fde7ee; color: #b3213f; }

/* ── Search log: the visit path (backend/country/visit-path) ──
   One row of steps from the search to the landing. Each step is a small card with a tone
   that says its part in the outcome: neutral for what happened, brand for where the site was
   picked, success for the landing, danger for where the search stopped. Under 992px the row
   becomes a column: the arrows turn and the cards stack. */
.se-path {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.se-path__steps {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: se-path;
}

.se-path__step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    background: #fff;
}

/* The arrow between two steps */
.se-path__step + .se-path__step { margin-left: 26px; }

.se-path__step + .se-path__step::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -17px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #b5b9cc;
    border-right: 2px solid #b5b9cc;
    transform: translateY(-50%) rotate(45deg);
}

.se-path__step--brand { border-color: #c9d1ff; }

.se-path__step--success { border-color: #bfe9da; }

.se-path__step--danger { border-color: #f4c6d2; }

.se-path__icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef1f6;
    color: #3f4254;
}

.se-path__step--brand .se-path__icon { background: #eef1ff; color: #3f5bd9; }

.se-path__step--success .se-path__icon { background: #e3f7f0; color: #07875f; }

.se-path__step--danger .se-path__icon { background: #fde7ee; color: #b3213f; }

.se-path__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.se-path__kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6c7086;
}

.se-path__title {
    font-weight: 600;
    color: #212529;
    overflow-wrap: anywhere;
}

.se-path__sub {
    font-size: 12px;
    color: #5f6378;
}

.se-path__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    color: #5f6378;
}

.se-path__note svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #8a8ea3;
}

@media (max-width: 991.98px) {
    .se-path__steps { flex-direction: column; }

    .se-path__step + .se-path__step { margin: 22px 0 0; }

    .se-path__step + .se-path__step::before {
        top: -15px;
        left: 22px;
        transform: rotate(135deg);
    }
}

/* ── Search log: the AI Overview (backend/country/ai-overview-block) ──
   Laid out like Google's: the answer on the left, the sources beside it on wide screens and
   under it below 1200px, where the timeline column gets too narrow for two. The answer and
   the source list fold independently: a long answer opens collapsed behind its own "Show
   more", the list shows its first three sources plus the customer's behind "Show all".
   Colour means one thing only: the customer's site (brand #5d78ff), and green for the one
   card that was clicked. Google's own key-sentence highlight is kept in the markup but drawn
   plain, so nothing else competes. */
.se-aio {
    --se-aio-border: #e3e6f0;
    --se-aio-soft: #eef0f6;
    --se-aio-text: #3f4254;
    --se-aio-muted: #6c7086;
    --se-aio-brand: #5d78ff;
    --se-aio-brand-dark: #2c46b8;
    --se-aio-brand-soft: #dfe5ff;
    --se-aio-brand-line: #c9d1ff;
    --se-aio-brand-bg: #f6f7ff;
    --se-aio-success: #0abb87;
    --se-aio-success-dark: #07875f;
    --se-aio-success-line: #9fdcc6;
    --se-aio-success-bg: #f0fbf7;
    position: relative;
    border: 1px solid var(--se-aio-border);
    border-radius: 12px;
    background: #fff;
    color: var(--se-aio-text);
}

.se-aio__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--se-aio-soft);
}

.se-aio__spark { display: inline-flex; }

.se-aio__titles {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    min-width: 0;
}

.se-aio__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #212529;
}

.se-aio__subtitle {
    font-size: 12px;
    color: var(--se-aio-muted);
}

.se-aio__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f1f2f7;
    color: var(--se-aio-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.se-aio__status--clicked {
    background: #e3f7f0;
    color: var(--se-aio-success-dark);
    font-weight: 600;
}

.se-aio__status--cited {
    background: #fff3d6;
    color: #8a5a00;
    font-weight: 600;
}

.se-aio__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .se-aio__body { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }

    .se-aio__answer { border-right: 1px solid var(--se-aio-soft); }
}

@media (max-width: 1199.98px) {
    .se-aio__answer { border-bottom: 1px solid var(--se-aio-soft); }
}

/* The answer */
.se-aio__answer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 22px 16px 20px;
    font-size: 14px;
    line-height: 1.65;
}

.se-aio__answer-inner { position: relative; }

.se-aio:not(.se-aio--open) .se-aio__answer-inner {
    max-height: 250px;
    overflow: hidden;
}

.se-aio:not(.se-aio--open) .se-aio__answer-inner::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.se-aio__answer-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.se-aio__credits {
    font-size: 12px;
    color: var(--se-aio-muted);
}

.se-aio__heading {
    margin: 14px 0 6px;
    color: #212529;
    font-size: 14.5px;
    font-weight: 600;
}

.se-aio__heading:first-child { margin-top: 0; }

.se-aio__paragraph { margin: 0 0 10px; }

.se-aio__list {
    margin: 0 0 12px;
    padding-left: 20px;
}

.se-aio__list li { margin-bottom: 6px; }

.se-aio__list li::marker { color: #a2a5b9; }

.se-aio__answer strong {
    color: #212529;
    font-weight: 600;
}

/* Google's key sentence: kept in the markup, drawn like the rest of the answer */
.se-aio__mark {
    padding: 0;
    background: transparent;
    color: inherit;
}

/* The source chip Google prints after a sentence ("Zapier +2"). The customer's own stand out:
   they are where the answer credits their site. */
.se-aio__cite {
    display: inline-block;
    margin-left: 5px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--se-aio-soft);
    color: #5f6378;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: 1px;
}

.se-aio__cite--mine {
    background: var(--se-aio-brand-soft);
    color: var(--se-aio-brand-dark);
    font-weight: 600;
}

.se-aio__muted { color: var(--se-aio-muted); }

.se-aio__small { font-size: 12px; }

.se-aio__table {
    margin: 0 0 12px;
    overflow-x: auto;
}

.se-aio__table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.se-aio__table th,
.se-aio__table td {
    padding: 6px 8px;
    border: 1px solid var(--se-aio-border);
    text-align: left;
    vertical-align: top;
}

.se-aio__table th {
    background: #f7f8fa;
    font-weight: 600;
}

/* The sources */
.se-aio__sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 14px;
}

.se-aio__sources-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.se-aio__sources-title {
    color: var(--se-aio-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.se-aio__count {
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f2f7;
    color: #5f6378;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.se-aio__count--mine {
    background: #eef1ff;
    color: #3f5bd9;
}

.se-aio__source-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-aio__source {
    display: flex;
    flex-direction: column;
    padding: 7px 10px;
    border: 1px solid #eceef5;
    border-radius: 9px;
    background: #fff;
}

.se-aio__source--mine {
    border-color: var(--se-aio-brand-line);
    background: var(--se-aio-brand-bg);
}

.se-aio__source--clicked {
    border-color: var(--se-aio-success-line);
    background: var(--se-aio-success-bg);
}

.se-aio__source-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.se-aio__rank {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--se-aio-soft);
    color: #5f6378;
    font-size: 11.5px;
    font-weight: 700;
}

.se-aio__source--mine .se-aio__rank {
    background: var(--se-aio-brand-soft);
    color: var(--se-aio-brand-dark);
}

.se-aio__source--clicked .se-aio__rank {
    background: var(--se-aio-success);
    color: #fff;
}

/* A letter avatar rather than the site's favicon: the log would otherwise load an image from
   every cited site, or from Google, each time it is opened. The hue is derived from the domain,
   so a site keeps its colour from one log to the next. */
.se-aio__avatar {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: hsl(var(--se-aio-hue, 230), 45%, 46%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.se-aio__source-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.se-aio__source-site {
    overflow: hidden;
    color: var(--se-aio-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-aio__source-domain::before {
    content: '·';
    margin: 0 4px;
}

.se-aio__source-title {
    overflow: hidden;
    color: #212529;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Only the customer's cited source keeps its snippet: it is the line Google quoted from them */
.se-aio__source-snippet {
    display: block;
    margin: 6px 0 0 32px;
    padding-left: 10px;
    border-left: 2px solid var(--se-aio-brand-line);
    color: #5f6378;
    font-size: 12px;
    line-height: 1.45;
}

.se-aio__source--clicked .se-aio__source-snippet { border-left-color: var(--se-aio-success-line); }

.se-aio__source-badge {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--se-aio-brand-soft);
    color: var(--se-aio-brand-dark);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.se-aio__source-badge--clicked {
    background: var(--se-aio-success);
    color: #fff;
}

/* Collapsed list: the sources past the first three stay out unless they are the customer's,
   and a divider names the gap before theirs */
.se-aio:not(.se-aio--all) .se-aio__source--extra { display: none; }

.se-aio--all .se-aio__gap { display: none; }

.se-aio__gap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 10px;
    color: #8a8ea3;
    font-size: 11.5px;
}

.se-aio__gap::before,
.se-aio__gap::after {
    content: '';
    flex: 1 1 auto;
    border-top: 1px dashed #d5dbef;
}

/* The two toggles: a pill under the answer, a text link under the sources */
.se-aio__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d5dbef;
    border-radius: 999px;
    background: #fff;
    color: #3f5bd9;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.se-aio__toggle:hover { color: var(--se-aio-brand-dark); border-color: var(--se-aio-brand-line); }

.se-aio__toggle svg { transition: transform .15s ease; }

.se-aio--open .se-aio__toggle:not(.se-aio__toggle--sources) svg,
.se-aio--all .se-aio__toggle--sources svg { transform: rotate(180deg); }

.se-aio__toggle--sources {
    align-self: flex-start;
    margin-top: 4px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
}

/* ── Search log: the results list ──
   The AI Overview as a row at the place it took among the results
   (backend/country/ai-overview-serp-row), and the badges on the customer's rows. */
.kt-notification-v2 .kt-notification-v2__item.se-serp-aio {
    margin: 0 0 6px;
    border: 1px solid #c9d1ff;
    border-radius: 10px;
    background: #fff;
}

.kt-notification-v2 .kt-notification-v2__item.se-serp-aio--clicked {
    border-color: #9fdcc6;
    background: #f0fbf7;
}

.se-serp-aio__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef1ff;
    color: #3f5bd9;
    font-weight: 600;
}

.se-serp-aio--clicked .se-serp-aio__rank {
    background: #0abb87;
    color: #fff;
}

.se-serp-aio__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.se-serp-aio__title svg { color: #5d78ff; }

/* The customer's organic rows: green when it is the row that was clicked, outlined in brand
   when the launch clicked the AI Overview instead. The rank circle follows. */
.kt-notification-v2 .kt-notification-v2__item.se-serp-clicked {
    border: 1px solid #9fdcc6;
    border-radius: 10px;
    background: #f0fbf7;
}

.kt-notification-v2 .kt-notification-v2__item.se-serp-mine {
    border: 1px solid #c9d1ff;
    border-radius: 10px;
    background: #fff;
}

.kt-notification-v2 .kt-notification-v2__item-icon .se-serp-rank--clicked,
.kt-notification-v2 .kt-notification-v2__item-icon .se-serp-rank--mine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-style: italic;
    font-weight: 600;
}

.kt-notification-v2 .kt-notification-v2__item-icon .se-serp-rank--clicked {
    background: #0abb87;
    color: #fff;
}

.kt-notification-v2 .kt-notification-v2__item-icon .se-serp-rank--mine {
    background: #eef1ff;
    color: #3f5bd9;
}

.se-serp-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef1f6;
    color: #5f6378;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    vertical-align: 2px;
    white-space: nowrap;
}

.se-serp-badge--mine {
    border: 1px solid #c9d1ff;
    background: #fff;
    color: #3f5bd9;
    font-weight: 600;
}

.se-serp-badge--clicked {
    background: #0abb87;
    color: #fff;
    font-weight: 600;
}

/* The position badge of a search clicked in the AI Overview (backend/campaign/result): one flat
   brand colour, so it reads next to the green and red badges as a third state and not a fourth */
.se-result-badge--ai {
    background: #5d78ff !important;
    color: #fff !important;
}