/*
 * 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: #646c9a;
    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; }

.se-field--row > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

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

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

.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;
}

/* Links to click (campaign settings): the link page 2 opens, any or the one the customer chose.
   "Links you choose" opens a panel: the two ways to match a link side by side with an "or"
   between them (a column from 768px, a line across below), then what page 2 does when the
   landing page has no such link. */
.se-links .se-choice > span { min-width: 0; }

.se-links__note {
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid #f3d38c;
    border-radius: 8px;
    background: #fff8eb;
    font-size: 13px;
    color: #6b4500;
}

.se-links__chosen {
    margin-top: 14px;
    padding: 18px 20px 20px;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #f7f8fa;
}

.se-links__intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #48465b;
}

.se-links__chosen .form-group { margin-bottom: 0; }

.se-links__chosen label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #282a3c;
}

.se-links__help { margin-top: 6px; font-size: 12.5px; }

.se-links__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f6378;
}

.se-links__or::before,
.se-links__or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #e2e5ec;
}

@media (min-width: 768px) {
    .se-links__fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0 16px;
    }

    .se-links__or {
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    .se-links__or::before,
    .se-links__or::after {
        width: 1px;
        height: auto;
    }
}

/* Metronic's red is 3.48:1 on this background: the darker one of the other settings errors */
.se-links .invalid-feedback {
    margin-top: 6px;
    font-size: 12.5px;
    color: #b3213f;
}

/* "Fill in the link address or the link text": said once, under both fields */
.se-links__fields + .invalid-feedback { margin-top: 12px; }

.se-links__fallback {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e2e5ec;
}

.se-links__fallback .se-field--row {
    flex-wrap: wrap;
    gap: 10px 24px;
}

.se-links__fallback .se-field__text { flex-basis: 240px; }

.se-links__fallback .se-field__desc { font-size: 12.5px; }

/* 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;
}

.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;
}

/* The cap, with what it is compared to (what the keywords add up to) and two quick values */
.se-cap {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #ebedf2;
    border-radius: 8px;
    background: #f7f8fa;
    font-size: 13px;
    color: #48465b;
}

.se-cap--trial {
    border-color: #f3d38c;
    background: #fff8eb;
}

.se-cap__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.se-cap .form-control {
    width: 130px;
    font-weight: 600;
}

.se-cap__text {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 2px;
    line-height: 1.5;
}

.se-cap__quick {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.se-cap__quick .se-preset {
    height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
}

.se-cap__offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3e0b5;
}

.se-cap__left { margin-top: 14px; }

.se-cap__left-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.se-country-cap { white-space: nowrap; }
.se-country-cap span { color: #646c9a; }

.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 svg {
    margin-right: 6px;
    vertical-align: -3px;
    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;
    align-items: center;
    gap: 10px;
}

/* Section nav: stays under the fixed header (60px once it has minimised) while the page scrolls */
.se-nav {
    position: sticky;
    top: 60px;
    z-index: 2;
    padding: 10px 25px;
    border-bottom: 1px solid #ebedf2;
    background: #fff;
}

.se-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-nav__link {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #48465b;
    text-decoration: none;
}

.se-nav__link:hover {
    background: #f7f8fa;
    color: #282a3c;
    text-decoration: none;
}

.se-nav__link--active {
    background: #f4f6ff;
    color: #2c3fb1;
    font-weight: 600;
}

/* Anchored sections land under the header and the nav, not behind them */
.se-section { scroll-margin-top: 130px; }

/* Free trial: the limits of this page in one card, with the plan sized for the account */
.se-trial {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 18px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border: 1px solid #dfe4fb;
    border-radius: 10px;
    background: #f8f9ff;
}

.se-trial__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8ecff;
    color: #2c3fb1;
}

.se-trial__body { flex: 1 1 320px; }

.se-trial__title {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #282a3c;
}

.se-trial__title span {
    font-weight: 400;
    color: #646c9a;
}

.se-trial__limits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-trial__limits li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #ebedf2;
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    color: #48465b;
}

.se-trial__limits svg {
    flex: 0 0 auto;
    color: #646c9a;
}

.se-trial__offer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

/* Two lines: the plan the button starts, then the link to every plan */
.se-trial__note {
    font-size: 12.5px;
    line-height: 1.5;
    text-align: right;
    color: #646c9a;
}

.se-trial__pick { display: block; }

@media (min-width: 992px) {
    .se-trial__pick,
    .se-trial__all { white-space: nowrap; }
}

.se-trial__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    white-space: nowrap;
}

.se-trial__cta span {
    font-weight: 400;
    opacity: .85;
}

.se-trial__all {
    display: block;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .se-trial__offer {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .se-trial__note { text-align: left; }
}

/* A locked option (free trial): a button drawn as a dashed chip, which opens the offer */
.se-choice--locked {
    padding: 0;
    border: 0;
    background: none;
}

.se-choice--locked > span {
    border-style: dashed;
    border-color: #d3d8e6;
    background: #fbfbff;
    color: #646c9a;
    cursor: pointer;
}

.se-choice--locked > span svg { flex: 0 0 auto; }

.se-choice--locked:hover > span,
.se-choice--locked[aria-expanded="true"] > span {
    border-color: #b9c2ff;
    color: #2c3fb1;
}

.se-choice--locked:focus-visible { outline: none; }

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

/* The field holding a locked option wraps, so the offer opens on its own line under it */
.se-field--offer { flex-wrap: wrap; }

.se-offer {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: 10px;
    background: #282a3c;
    color: #fff;
    box-shadow: 0 12px 32px rgba(40, 42, 60, .25);
}

.se-offer__body { flex: 1 1 320px; }

.se-offer__title {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
}

.se-offer__text {
    font-size: 13px;
    line-height: 1.55;
    color: #c9cde0;
}

.se-offer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.se-offer__dismiss { color: #c9cde0; }
.se-offer__dismiss:hover { color: #fff; }

/* Something every Google campaign gets without a setting (the AI Overview click) */
.se-included {
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px dashed #c9d1ff;
    border-radius: 8px;
    background: #fbfbff;
}

.se-included__icon {
    margin-right: 6px;
    vertical-align: -3px;
    color: #5d78ff;
}

.se-included__badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #e6f8f2;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f7a55;
    white-space: nowrap;
}

/* Budget strip: this campaign and the others against what the plan covers per day */
.se-budget {
    margin-bottom: 30px;
    padding: 16px 18px;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #fff;
}

.se-budget--near,
.se-budget--over {
    border-color: #f3d38c;
    background: #fff8eb;
}

.se-budget__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 20px;
}

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

.se-budget__text {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.55;
    color: #646c9a;
}

.se-budget--near .se-budget__text,
.se-budget--over .se-budget__text { color: #6b4500; }

.se-budget__figure {
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #282a3c;
}

.se-budget__figure small {
    font-size: 13px;
    font-weight: 500;
    color: #646c9a;
}

.se-budget__bar {
    display: flex;
    height: 12px;
    margin-top: 14px;
    border-radius: 999px;
    background: #e3e7f3;
    overflow: hidden;
}

.se-budget--near .se-budget__bar,
.se-budget--over .se-budget__bar { background: #f3e0b5; }

.se-budget__seg--this { background: #2c3fb1; }
.se-budget__seg--others { background: #8d9dff; }
.se-budget__seg--over { background: #c47f00; }

.se-budget__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: #48465b;
}

.se-budget__legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.se-budget__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.se-budget__swatch--this { background: #2c3fb1; }
.se-budget__swatch--others { background: #8d9dff; }
.se-budget__swatch--over { background: #c47f00; }

.se-budget__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.se-budget__delta {
    margin-left: 6px;
    font-weight: 400;
    opacity: .85;
}

.se-budget__note {
    font-size: 13px;
    color: #07875f;
}

.se-budget__note svg { margin-right: 4px; vertical-align: -2px; }

/* The week, summed */
.se-week__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
}

.se-week__total {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f4f6ff;
    font-size: 12.5px;
    color: #48465b;
    white-space: nowrap;
}

.se-week__total strong { color: #2c3fb1; }

/* Save bar: what changed, and the shortcut */
.se-savebar__changed {
    font-weight: 400;
    color: #646c9a;
}

.se-savebar__hint {
    margin-right: 6px;
    font-size: 12px;
    color: #646c9a;
}

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

/* Website locked on the free trial (components/campaign-target-fields) */
.se-locked-input .form-control[readonly] {
    background: #f7f8fa;
    color: #646c9a;
}

/* The globe and the lock inside the website field */
#target-website ~ .kt-input-icon__icon { color: #74788d; }

/* ── Country settings page (backend/country/settings) ── */
.se-optional {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #646c9a;
}

/* The city or region field, with a button back to the whole country inside it */
.se-location { position: relative; }

.se-location .form-control { padding-right: 150px; }

.se-location .kt-input-icon__icon { color: #74788d; }

.se-location__clear {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #e2e5ec;
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    color: #48465b;
    transform: translateY(-50%);
    cursor: pointer;
}

.se-location__clear:hover {
    border-color: #b9c2ff;
    color: #2c3fb1;
}

/* ── 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--warning {
    border: 1px solid #f3d38c;
    background: #fff8eb;
    color: #6b4500;
}

.se-callout--brand {
    border: 1px solid #c9d1ff;
    background: #f4f6ff;
    color: #48465b;
}

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

.se-rule__icon {
    flex: 0 0 auto;
    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: #646c9a;
    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: 8px; }
.se-notices .se-notice.se-callout { margin-bottom: 12px; }

/* The folded notices (three or more): a strip attached under the first notice, like the edge of the
   cards stacked behind it */
.se-notices__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 32px);
    margin: -12px auto 12px;
    padding: 5px 12px 6px;
    border: 1px solid #dfe4fb;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #eef1fb;
    color: #2c3fb1;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.se-notices__more:hover,
.se-notices__more:focus { background: #e3e8fb; color: #2c3fb1; text-decoration: none; }
.se-notices__more svg { transition: transform .15s ease; }
.se-notices__more:not(.collapsed) svg { transform: rotate(180deg); }

.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,
.se-notice__dismiss:focus-visible { 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-table on the selectors: its cell padding and right-aligned columns come later in this file */
    .se-table.se-searches-table td,
    .se-table.se-searches-table td:first-child,
    .se-table.se-searches-table td:last-child {
        border: 0;
        padding: 4px 0;
        display: flex;
        align-items: baseline;
        gap: 4px 10px;
        text-align: left;
    }

    .se-searches-table td::before {
        flex: 0 0 92px;
        content: attr(data-label);
        font-size: 10px;
        line-height: 1.6;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #646c9a;
        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 page (backend/country/log-google, log-old) ──
   Three cards: the summary (backend/country/log-head, then the outcome in figures,
   backend/country/log-figures), under the tabs of the country pages; the results, under the
   search as it was typed; then the visit on the site or why there was none. No timeline rail:
   each section carries its own heading, and the results and the pages of the visit share one
   rank column. */
.se-log {
    color: #3f4254;
    font-size: 13px;
}

.se-log-sum {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* A card holds one section: the rule and the space that set sections apart are the card's */
.se-log-card .se-log-sec {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.se-log-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 32px;
}

.se-log-head__what {
    display: flex;
    flex: 1 1 420px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.se-log-head__kicker {
    color: #6c7086;
    font-size: 12px;
    font-weight: 500;
}

.se-log-head__keyword {
    margin: 0;
    color: #212529;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.se-log-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    min-width: 0;
    color: #5f6378;
    font-size: 13px;
}

.se-log-head__site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #212529;
    font-weight: 600;
    word-break: break-all;
}

.se-log-head__site svg { flex: 0 0 auto; }

.se-log-head__target {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Where the search ran, and on which device */
.se-log-head__where {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.se-log-head__where svg { flex: 0 0 auto; }

.se-log-head__outcome {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

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

.se-log-chip--found { background: #e3f7f0; color: #0f7a55; }

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

/* No visit: why, in one line, where the figures of a visit would be */
.se-log-miss {
    padding: 16px 20px;
    border: 1px solid #ebedf2;
    border-radius: 12px;
}

.se-log-miss__title {
    color: #212529;
    font-size: 16px;
    font-weight: 600;
}

.se-log-miss__text {
    margin: 2px 0 0;
    color: #5f6378;
    font-size: 13px;
}

/* A section of the page: its heading on the left, a short count on the right. The scroll
   margins keep a section or a row reached from a link (the path of a Business Profile search)
   clear of the header, which turns into a fixed 60px bar on scroll and moves the page up 80px
   on wide screens. */
.se-log-sec {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #ebedf2;
    scroll-margin-top: 150px;
}

.se-log-sec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.se-log-sec__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #212529;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

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

.se-log-sec__meta {
    color: #5f6378;
    font-size: 12.5px;
}

.se-log-sec__empty {
    margin: 0;
    color: #5f6378;
}

@media (max-width: 767.98px) {
    .se-log-head__keyword { font-size: 20px; }

    /* The figures stack: each one kept short */
    .se-log-figures .se-stat { padding: 10px 14px; }

    .se-log-figures .se-stat__value { font-size: 20px; }

    .se-log-head__outcome { align-items: flex-start; }

    .se-log-sec {
        margin-top: 24px;
        padding-top: 24px;
    }
}

/* ── Search log: the path of a Business Profile search (backend/country/visit-path) ──
   One strip of steps from the search to the visit, each fact of the launch said once. A notch
   on each divider reads as "then". The icon of a step carries its part in the outcome: neutral
   for what happened, brand for where the site was found, success for the visit, danger for
   where the search stopped. Under 992px the strip becomes a column: the notches turn down and
   the steps stack. */
.se-path {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.se-path__steps {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    background: #fff;
    list-style: none;
}

.se-path__step {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    padding: 14px 18px 14px 24px;
}

.se-path__step:first-child {
    padding-left: 18px;
    border-radius: 9px 0 0 9px;
}

.se-path__step:last-child { border-radius: 0 9px 9px 0; }

.se-path__step:only-child { border-radius: 9px; }

.se-path__step + .se-path__step { border-left: 1px solid #e3e6f0; }

/* The notch between two steps: the step before pushes into the next one */
.se-path__step + .se-path__step::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -7px;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-top: 1px solid #e3e6f0;
    border-right: 1px solid #e3e6f0;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.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: 1px;
    min-width: 0;
}

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

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

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

.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 { grid-auto-flow: row; }

    .se-path__step,
    .se-path__step:first-child {
        padding: 12px 14px;
        border-radius: 0;
    }

    .se-path__step:first-child { border-radius: 9px 9px 0 0; }

    .se-path__step:last-child { border-radius: 0 0 9px 9px; }

    .se-path__step:only-child { border-radius: 9px; }

    .se-path__step + .se-path__step {
        border-top: 1px solid #e3e6f0;
        border-left: 0;
    }

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

/* A step that leads to its part of the page (backend/country/log-google): its title is the
   link, stretched over the whole step */
.se-path__step--link:hover { background: #fafbff; }

.se-path__link,
.se-path__link:hover,
.se-path__link:focus {
    color: #212529;
    text-decoration: none;
    outline: none;
}

.se-path__step--link:hover .se-path__link { color: #3f5bd9; }

/* From the keyboard the focus ring (ui-refresh) goes around the whole step, which the link covers,
   instead of around its title: drawn inside, the steps touching each other, with the notches on
   its two edges put away so they do not cut it */
.se-path__step--link:has(.se-path__link:focus-visible) { outline: 2px solid #366cf3; outline-offset: -2px; }

.se-path__step--link:has(.se-path__link:focus-visible)::before,
.se-path__step--link:has(.se-path__link:focus-visible) + .se-path__step::before { display: none; }

html body a.se-path__link:focus-visible { outline: 0 !important; box-shadow: none !important; }

/* Browsers without :has() keep a ring on the step through its link */
@supports not selector(:has(*)) {
    .se-path__step--link:focus-within { box-shadow: inset 0 0 0 2px #366cf3; }
}

.se-path__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* ── Search log: the AI Overview (backend/country/ai-overview-block) ──
   Laid out like Google's: "AI Overview" and what it did for the site, the answer on the left,
   the sources card on the right on wide screens (under the answer below 992px). In the results
   list it is one of the rows: its position in the gutter, framed whole (green when the visit
   came through it, a dashed green line when it cites the site). When the site is not in it, the
   row is its label line alone, the answer and the sources behind "Show the answer". The source
   card shows its first three sources plus the customer's behind "Show all". Colour means one
   thing only: the customer's site, in green. Inside a framed row the customer's source is not
   framed again: its rank and its badge mark it. 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: #1f1f1f;
    --se-aio-muted: #5f6368;
    --se-aio-brand-dark: #2c46b8;
    --se-aio-brand-line: #c9d1ff;
    --se-aio-success-dark: #07875f;
    --se-aio-success-line: #9fdcc6;
    --se-aio-success-bg: #f0fbf7;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 14px 16px 16px 0;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--se-aio-text);
}

.se-aio--ranked { grid-template-columns: 64px minmax(0, 1fr); }

.se-aio:not(.se-aio--ranked) { padding-left: 16px; }

.se-aio--cited {
    border-style: dashed;
    border-color: var(--se-aio-success-line);
}

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

.se-aio .se-serp-row__rank { justify-self: center; }

.se-aio--clicked .se-serp-row__rank {
    background: var(--se-aio-success-dark);
    color: #fff;
}

.se-aio--cited .se-serp-row__rank {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--se-aio-success-dark);
    color: var(--se-aio-success-dark);
}

.se-aio__main { min-width: 0; }

.se-aio__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 28px;
    font-size: 14px;
}

.se-aio__spark { display: inline-flex; margin-right: -4px; }

.se-aio__title {
    color: #1f1f1f;
    font-weight: 700;
}

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

/* What it did for the site, on its own line under the title */
.se-aio__note,
.se-aio__mine {
    flex-basis: 100%;
    order: 1;
    font-size: 13px;
    line-height: 1.4;
}

/* Cited: which source is the site's */
.se-aio__mine {
    min-width: 0;
    color: #3f4254;
    font-family: Poppins, Helvetica, sans-serif;
}

.se-aio__mine b {
    color: #212529;
    font-weight: 600;
}

/* "Show the answer": the answer and its sources, on the right of the label line */
.se-aio__open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dadce0;
    border-radius: 16px;
    background: #fff;
    color: #1f1f1f;
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.se-aio__open:hover { background: #f6f7f9; }

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

.se-aio--open .se-aio__open svg { transform: rotate(180deg); }

.se-aio:not(.se-aio--open) .se-aio__body { display: none; }

.se-aio__body {
    display: grid;
    grid-template-columns: minmax(0, 652px);
    align-items: start;
    gap: 16px 40px;
    margin-top: 10px;
}

/* The sources sit against the right edge, the answer keeps its reading width on the left */
@media (min-width: 992px) {
    .se-aio__body--sourced {
        grid-template-columns: minmax(0, 652px) minmax(260px, 340px);
        justify-content: space-between;
    }
}

/* The answer */
.se-aio__answer {
    min-width: 0;
    font-size: 16px;
    line-height: 1.6;
}

.se-aio__credits {
    margin: 10px 0 0;
    color: var(--se-aio-muted);
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 12px;
}

.se-aio__heading {
    margin: 18px 0 8px;
    color: #1f1f1f;
    font-size: 18px;
    font-weight: 400;
}

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

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

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

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

.se-aio__answer strong {
    color: #1f1f1f;
    font-weight: 700;
}

/* 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: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f1f3f4;
    color: #444746;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: 1px;
}

.se-aio__cite--mine {
    background: #e3f7f0;
    color: #0f7a55;
    font-weight: 700;
}

.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: 14px;
}

.se-aio__table th,
.se-aio__table td {
    padding: 6px 8px;
    border: 1px solid #dadce0;
    text-align: left;
    vertical-align: top;
}

.se-aio__table th {
    background: #f8f9fa;
    font-weight: 700;
}

/* The places Google lists in a local answer: a card per business, as under its map */
.se-aio__places {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    border: 1px solid #dadce0;
    border-radius: 12px;
}

.se-aio__place {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    font-size: 14px;
}

.se-aio__place + .se-aio__place { border-top: 1px solid #ecedef; }

.se-aio__place-name {
    color: #1a0dab;
    font-size: 16px;
}

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

.se-aio__place-rating { color: #1f1f1f; }

.se-aio__place-star { color: #fbbc04; }

.se-aio__place-text { margin-top: 4px; }

/* The sources: one card, a line per source */
.se-aio__sources {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.se-aio__source-list {
    align-self: stretch;
    margin: 0;
    padding: 6px 0;
    border: 1px solid #dadce0;
    border-radius: 16px;
    background: #fff;
    list-style: none;
}

.se-aio__source {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 16px;
}

.se-aio__source + .se-aio__source,
.se-aio__gap + .se-aio__source { border-top: 1px solid #ecedef; }

/* The customer's source: its domain line in green, no frame of its own */
.se-aio__source--mine .se-aio__source-site,
.se-aio__source--clicked .se-aio__source-site {
    color: var(--se-aio-success-dark);
    font-weight: 700;
}

.se-aio__source-site {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #444746;
    font-size: 12px;
}

.se-aio__rank {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1f3f4;
    color: #5f6368;
    font-size: 10.5px;
    font-weight: 700;
}

.se-aio__source--mine .se-aio__rank {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--se-aio-success-dark);
    color: var(--se-aio-success-dark);
}

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

/* A grey letter 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. Grey like the letters of the
   results, so only the customer's source carries a colour. */
.se-aio__avatar {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e8eaed;
    color: #4d5156;
    font-size: 10px;
    font-weight: 700;
}

.se-aio__source-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.se-aio__source-title {
    display: -webkit-box;
    overflow: hidden;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Only the customer's cited source keeps its snippet: it is the line Google quoted from them */
.se-aio__source-snippet {
    color: #4d5156;
    font-size: 12px;
    line-height: 1.45;
}

.se-aio__source-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--se-aio-success-line);
    color: var(--se-aio-success-dark);
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* 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: 4px 16px;
    color: #5f6368;
    font-size: 12px;
}

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

/* The toggles: a pill (the fold of a long list, elsewhere), 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--all .se-aio__toggle--sources svg { transform: rotate(180deg); }

.app .se-aio .se-aio__toggle--sources,
.se-aio .se-aio__toggle--sources {
    margin-top: 6px;
    padding: 6px 16px;
    border: 0;
    background: transparent;
    color: #0b57d0;
    font-size: 14px;
    font-weight: 700;
}

/* Phones: the rank narrows like the rows' */
@media (max-width: 767.98px) {
    .se-aio { padding: 12px 10px 14px 0; }

    .se-aio--ranked { grid-template-columns: 44px minmax(0, 1fr); }

    .se-aio .se-serp-row__rank {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .se-aio__answer { font-size: 15px; }

    .se-aio__open { padding: 0 12px; }
}

/* ── Search log: the results lists (backend/country/log-google, log-old, log-google-gmb) ──
   One anatomy for every row: a rank column, the text, an optional note on the right. A frame,
   when a row has one, is drawn on the whole row: green on the result that was clicked, a dashed
   green line on the site's result the visit did not go through, amber on the result opened for
   pogo sticking.
   The AI Overview is one of the rows (backend/country/ai-overview-serp-row) and draws its own
   frame. The organic log draws its list like the results page (se-gserp, below). */
.se-serp {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-serp-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    scroll-margin-top: 150px;
}

.se-serp-row--clicked,
.se-serp-row--mine,
.se-serp-row--pogo,
.se-serp-row--aio { margin: 6px 0; }

.se-serp-row--clicked {
    border-color: #9fdcc6;
    background: #f0fbf7;
}

.se-serp-row--mine {
    border-style: dashed;
    border-color: #9fdcc6;
    background: #fff;
}

.se-serp-row--pogo {
    border-color: #f2d08a;
    background: #fffaf0;
}

/* The card inside brings the frame and the rank (two classes: the phone padding of the rows
   must not reach it) */
.se-serp-row.se-serp-row--aio {
    display: block;
    padding: 0;
    border: 0;
}

.se-serp-row__rank {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eceef3;
    color: #212529;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.se-serp-row--clicked .se-serp-row__rank {
    background: #07875f;
    color: #fff;
}

.se-serp-row--mine .se-serp-row__rank {
    background: #fff;
    box-shadow: inset 0 0 0 2px #07875f;
    color: #07875f;
}

.se-serp-row--pogo .se-serp-row__rank {
    background: #fff1d6;
    color: #8a5a00;
}

.se-serp-row__main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.se-serp-row__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #212529;
    font-size: 14px;
    font-weight: 500;
}

.se-serp-row__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-serp-row__dest {
    overflow: hidden;
    color: #6c7086;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-serp-row__side {
    color: #5f6378;
    font-size: 12px;
    white-space: nowrap;
}

.se-serp-row__jump,
.se-serp-row__jump:hover {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #3f5bd9;
    font-weight: 600;
}

.se-serp-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef1f6;
    color: #5f6378;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

.se-serp-badge--mine {
    border: 1px solid #9fdcc6;
    background: #fff;
    color: #07875f;
    font-weight: 600;
}

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

.se-serp-badge--pogo {
    background: #fff1d6;
    color: #8a5a00;
    font-weight: 600;
}

/* The results of an old log (backend/country/log-old): one line per result, the destination
   in its own column, so the sites read down the list like a table */
.se-serp--lines > .se-serp-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 260px);
    min-height: 44px;
    padding: 6px 16px;
}

.se-serp--lines > .se-serp-row--clicked,
.se-serp--lines > .se-serp-row--mine,
.se-serp--lines > .se-serp-row--pogo { margin: 3px 0; }

.se-serp--lines .se-serp-row__title { font-size: 13.5px; }

.se-serp--lines .se-serp-row--clicked .se-serp-row__dest { color: #3f4254; }

/* The rest of a long list, behind one toggle */
.se-serp-more {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 16px 0;
}

.se-serp-more::before,
.se-serp-more::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #ebedf2;
}

.se-serp-more .se-aio__toggle:hover {
    border-color: #c9d1ff;
    color: #2c46b8;
}

.se-serp-more .se-aio__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The results of a log, drawn like the results page the visitor saw (backend/country/log-google):
   the search box with the keyword, where and on which device, then each result as the page
   prints it, its site on one line (a letter for a favicon, its name, its domain), its title in
   blue. The position sits in a 64px gutter on the left, outside what Google drew, a dark number
   on a grey disc so it reads first; the frame of a row still spans the whole list. Arial, like
   the page; what the log adds (the badges) keeps the app's own type. */
.se-gserp {
    margin: 0 -12px;
    color: #202124;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.58;
}

/* The search box starts at the left edge of the positions (the 32px discs centred in the 64px
   gutter), the badges of where and on which device after it */
.se-gserp__top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    padding: 4px 20px 16px 16px;
    border-bottom: 1px solid #ebebeb;
}

.se-gserp__box {
    display: flex;
    flex: 0 1 652px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 44px;
    padding: 0 18px;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, .12);
    color: #202124;
    font-size: 16px;
}

.se-gserp__box svg {
    flex: 0 0 auto;
    color: #70757a;
}

.se-gserp__q {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-gserp__where {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: Poppins, Helvetica, sans-serif;
}

.se-gserp__where .se-serp-badge {
    gap: 5px;
    padding: 3px 10px;
    font-size: 12px;
}

.se-gserp__where svg { flex: 0 0 auto; }

.se-serp--google {
    gap: 4px;
    padding: 0;
}

.se-serp--google > .se-serp-row { margin: 0; }

.se-serp--google > .se-serp-row:not(.se-serp-row--aio) {
    grid-template-columns: 64px minmax(0, 720px);
    align-items: center;
    column-gap: 0;
    padding: 12px 16px 12px 0;
}

.se-serp--google > .se-serp-row:not(.se-serp-row--aio) > .se-serp-row__rank { justify-self: center; }

/* The rank is the largest thing of the gutter, centred on the row. The AI Overview's label
   line is the rank's height, so its rank sits on that line's centre. */
.se-serp--google .se-serp-row__rank {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.se-serp--google .se-aio__label { min-height: 32px; }

.se-serp-row__site {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* A grey letter for a favicon: the rank stays the only mark in the gutter */
.se-serp-row__fav {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e8eaed;
    color: #4d5156;
    font-size: 10px;
    font-weight: 700;
}

.se-serp-row__name {
    min-width: 0;
    overflow: hidden;
    color: #4d5156;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The domain after the site name Google printed: "Wikipedia · es.wikipedia.org" */
.se-serp--google .se-serp-row__dest {
    color: #4d5156;
    font-size: 13px;
}

.se-serp--google .se-serp-row__dest::before {
    content: '·';
    margin: 0 6px;
}

.se-serp--google .se-serp-badge {
    margin-left: 4px;
    font-family: Poppins, Helvetica, sans-serif;
}

.se-serp--google .se-serp-row__title {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #1a0dab;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The results under the site's, folded behind a grey pill between two lines, as on Google */
.se-gserp__fold {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 10px 28px 4px 76px;
}

.se-gserp__fold::before,
.se-gserp__fold::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #dadce0;
}

.se-gserp__fold-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    background: #f1f3f4;
    color: #1f1f1f;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.se-gserp__fold-btn:hover { background: #e8eaed; }

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

.se-gserp__fold-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Search log: the visit (backend/country/log-google) ──
   One line per page read on the site: its title, then its path, each kept to one line (the
   whole title and the link that led to the page are in the tooltip). Numbered on the rank
   column of the results and joined by a thin rail, then a last line for how the visit ended. */
.se-visit {
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-visit__step {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 17px 14px;
}

.se-visit__step:last-child { padding-bottom: 0; }

.se-visit__step::before {
    content: '';
    position: absolute;
    top: 34px;
    bottom: 4px;
    left: 31px;
    width: 2px;
    border-radius: 2px;
    background: #e3e6f0;
}

.se-visit__step:last-child::before { display: none; }

.se-visit__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e3f7f0;
    color: #0f7a55;
    font-size: 12.5px;
    font-weight: 600;
}

.se-visit__step--end .se-visit__dot {
    background: #f1f2f7;
    color: #5f6378;
}

.se-visit__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-top: 4px;
}

.se-visit__title {
    overflow: hidden;
    color: #212529;
    font-size: 13.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-visit__url {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.se-visit__url {
    color: #5f6378;
    text-decoration: underline;
    text-decoration-color: #c4c7d4;
    text-underline-offset: 2px;
}

a.se-visit__url:hover {
    color: #212529;
    text-decoration-color: currentColor;
}

.se-visit__sub {
    max-width: 760px;
    color: #5f6378;
    font-size: 12.5px;
}

.se-visit__sub a {
    color: #3f5bd9;
    font-weight: 600;
}

/* Page 2 opened by the link the campaign chose */
.se-visit__sub--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2c46b8;
    font-weight: 600;
}

.se-visit__sub--link svg { flex: 0 0 auto; }

/* ── Search log: no visit (backend/country/log-google) ── */
.se-novisit {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #fafbfc;
}

.se-novisit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eceef3;
    color: #5f6378;
}

.se-novisit__body {
    min-width: 0;
    padding-top: 4px;
}

.se-novisit__title {
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.se-novisit__text {
    margin: 2px 0 8px;
    color: #5f6378;
    font-size: 12.5px;
}

.se-novisit__link {
    color: #3f5bd9;
    font-size: 12.5px;
    font-weight: 600;
}

/* Phones: the rows wrap their title and put their note under it, the columns narrow */
@media (max-width: 767.98px) {
    .se-serp-row {
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
        padding: 10px 12px;
    }

    .se-serp-row__rank {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .se-serp-row__title {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 8px;
    }

    .se-serp-row__text { white-space: normal; }

    .se-serp-row__side {
        grid-column: 2;
        margin-top: 6px;
        white-space: normal;
    }

    .se-serp-more {
        margin-right: 12px;
        margin-left: 12px;
    }

    .se-serp--lines > .se-serp-row {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 8px 12px;
    }

    .se-serp--lines .se-serp-row__dest { grid-column: 2; }

    .se-serp--lines > .se-serp-row .se-serp-row__rank { grid-row: span 2; }

    /* The results page: a narrower gutter, titles on as many lines as they need; where and on
       which device under the search box */
    .se-gserp { margin: 0 -8px; }

    /* The 30px discs are centred in a 44px gutter: 7px from the edge */
    .se-gserp__top {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 0 8px 12px 7px;
    }

    .se-gserp__box {
        flex-basis: 100%;
        height: 40px;
        padding: 0 14px;
        font-size: 15px;
    }

    .se-serp--google .se-serp-row__rank {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .se-serp--google .se-aio__label { min-height: 30px; }

    .se-serp--google > .se-serp-row:not(.se-serp-row--aio) {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 10px 10px 10px 0;
    }

    /* A site line with badges ("Featured snippet", "Clicked"): the name keeps at most 60% of the
       line and the badges go under it when they do not fit. Without badges the name keeps the
       line, cut short, so it never drops under its letter. */
    .se-serp--google .se-serp-row__site:has(.se-serp-badge) {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .se-serp--google .se-serp-row__site:has(.se-serp-badge) .se-serp-row__name { max-width: 60%; }

    .se-serp--google .se-serp-row__title {
        font-size: 17px;
        white-space: normal;
    }

    .se-gserp__fold {
        gap: 8px;
        margin: 6px 8px 16px;
    }

    .se-gserp__fold-btn {
        flex: 0 1 auto;
        height: auto;
        min-height: 36px;
        padding: 8px 16px;
        text-align: center;
        white-space: normal;
    }

    .se-visit__step {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 12px;
        padding: 0 13px 18px;
    }

    .se-visit__step::before {
        top: 32px;
        left: 26px;
    }

    .se-visit__dot {
        width: 28px;
        height: 28px;
    }

    .se-visit__title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .se-novisit {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 12px;
        padding: 14px 12px;
    }

    .se-novisit__icon {
        width: 28px;
        height: 28px;
    }
}

/* 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: #4a63e7 !important;
    color: #fff !important;
}

/* ── Dashboard: performance graph before the first searches (backend/dashboard) ──
   A faint placeholder chart under a short message, about the height of the real graph
   so the card does not jump once data arrives. */
.se-graph-empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 280px;
    overflow: hidden;
    border: 1px dashed #dfe3f5;
    border-radius: 10px;
    background: linear-gradient(180deg, #fafbff 0%, #f4f6ff 100%);
}

.se-graph-empty__chart {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
}

.se-graph-empty__chart line {
    stroke: #e6e9f6;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.se-graph-empty__area { fill: rgba(93, 120, 255, .06); }

.se-graph-empty__line {
    fill: none;
    stroke: rgba(93, 120, 255, .30);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    vector-effect: non-scaling-stroke;
}

.se-graph-empty__content {
    position: relative;
    max-width: 480px;
    padding: 32px 24px;
    text-align: center;
}

.se-graph-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(93, 120, 255, .15);
    color: #5d78ff;
    font-size: 1.6rem;
}

.se-graph-empty__title {
    margin-bottom: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #48465b;
}

.se-graph-empty__text {
    margin-bottom: 16px;
    font-size: 13px;
    color: #5f6378;
}

.se-graph-empty__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(72, 70, 91, .08);
    font-size: 12px;
    font-weight: 500;
    color: #3f5bd9;
}

.se-graph-empty__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5d78ff;
    animation: se-graph-empty-pulse 1.6s ease-in-out infinite;
}

@keyframes se-graph-empty-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(93, 120, 255, .45); }
    50% { box-shadow: 0 0 0 5px rgba(93, 120, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .se-graph-empty__dot { animation: none; }
}

/* ============================================================
   2026-10: backend pages in the language of the settings, search log and pricing pages
   (mockups: "Backend Pages Redesign" canvas). Shared pieces first, then one block per page.
   ============================================================ */

/* ── Head of a campaign, country or keyword page (backend/campaign/header, backend/country/header):
   what the page is about on the left, the views and the actions of that level on the right ── */
.se-ehead {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 20px;
    min-width: 0;
}

.se-ehead__id {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.se-ehead__flag {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 0 0 1px #e3e6f0;
}

.se-ehead__tabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.se-ehead__tabs .nav-tabs { flex-wrap: nowrap; }
.se-ehead__tabs .nav-item { min-width: 0; }

.se-ehead__tabs .nav-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The keyboard ring of a tab (ui-refresh) is drawn inside it: the row of tabs clips what passes
   its edges, which left only a thin line of the ring */
html body .se-ehead__tabs .nav-link:focus-visible {
    outline-offset: -2px;
    box-shadow: none !important;
}

/* The icon of a tab: grey, in the brand colour on the current tab like the tab's line */
.se-ehead__tabs .nav-link svg {
    vertical-align: -3px;
    color: #a2a5b9;
}

.se-ehead__tabs .nav-link:hover svg,
.se-ehead__tabs .nav-link.active svg { color: #4e7ef4; }

.se-ehead__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .se-ehead { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .se-ehead__tabs { flex: 1 1 100%; order: 1; }
    .se-ehead__tabs .nav-tabs { flex-wrap: wrap; }
    .se-ehead__tabs .nav-link { padding: 4px 0 !important; border-bottom: 0 !important; }
    .se-ehead__actions { flex: 1 1 100%; order: 2; margin-left: 0; }
}

/* The views of one campaign or country, as a segmented control (like pg-billing) */
.se-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: #f1f2f7;
}

.se-seg__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    color: #48465b;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.se-seg__item:hover {
    color: #2c3fb1;
    text-decoration: none;
}

.se-seg__item--on {
    background: #fff;
    box-shadow: 0 1px 3px rgba(42, 47, 69, .15);
    color: #2c3fb1;
    font-weight: 600;
}

/* A square button holding one icon (the "More actions" menu) */
.btn.se-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dfe2ea;
    background: #fff;
    color: #48465b;
}

.btn.se-iconbtn:hover { border-color: #b9c2ff; color: #2c3fb1; }
.btn.se-iconbtn--sm { width: 36px; height: 36px; }

.dropdown-menu .dropdown-item svg { margin-right: 8px; color: #646c9a; }

/* Searches a day of a campaign, country or keyword (components/searches-per-day) */
.se-perday {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: #eef1ff;
    color: #2c3fb1;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.se-perday--capped { background: #fff1d6; color: #8a5300; }
.se-perday--off { background: #fde7ee; color: #b3213f; }

/* ── Account pages: the account sections as a row of pills (backend/account/header) ── */
.kt-portlet__head.se-account-head {
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ── A portlet title with its count ── */
.se-count {
    margin-left: 8px;
    color: #646c9a;
    font-size: 13px;
    font-weight: 500;
}

.se-head-sub {
    margin-left: 8px;
    color: #646c9a;
    font-size: 12.5px;
    font-weight: 400;
}

/* ── Figures ── */
.se-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #ebedf2;
    border-radius: 12px;
    background: #ebedf2;
}

.se-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 16px 20px;
    background: #fff;
}

.se-stat__label { color: #646c9a; font-size: 12.5px; font-weight: 500; }

.se-stat__value {
    color: #212529;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.se-stat__value small { color: #646c9a; font-size: 14px; font-weight: 500; }
.se-stat__sub { color: #646c9a; font-size: 12px; }

/* A statistics block: the figures and the date range, then the chart, and a side panel on wide screens */
.se-dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    margin: -25px;
}

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

.se-dash__main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    padding: 25px;
}

.se-dash__side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 25px;
    border-left: 1px solid #ebedf2;
}

.se-dash__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* The figures above a chart (backend/statistics): one compact row, each figure as wide as its
   text so a line under a figure never wraps. Two columns on phones, a third figure on its own row. */
.se-dash__top .se-stats {
    flex: 0 1 auto;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, max-content);
}

.se-dash__top .se-stat { gap: 0; padding: 9px 16px 10px; }
.se-dash__top .se-stat__label { font-size: 12px; line-height: 1.35; }
.se-dash__top .se-stat__value { font-size: 20px; line-height: 1.25; }
.se-dash__top .se-stat__sub { line-height: 1.35; white-space: nowrap; }

@media (max-width: 767.98px) {
    .se-dash__top .se-stats {
        flex-basis: 100%;
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .se-dash__top .se-stat:nth-child(3) { grid-column: 1 / -1; }
}

/* The narrowest phones: a half-width figure may take two lines (the third one has its own row) */
@media (max-width: 359.98px) {
    .se-dash__top .se-stat:nth-child(-n+2) .se-stat__sub { white-space: normal; }
}

.se-chart__note {
    color: #646c9a;
    font-size: 12px;
    text-align: right;
}

.se-chart__plot { position: relative; height: 260px; }

@media (max-width: 1199.98px) {
    .se-dash { grid-template-columns: minmax(0, 1fr); }
    .se-dash__side { border-top: 1px solid #ebedf2; border-left: 0; }
}

/* Key and value rows */
.se-kv { display: flex; flex-direction: column; }

.se-kv__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid #f1f2f7;
}

.se-kv__row:first-child { padding-top: 0; border-top: 0; }
.se-kv__key { color: #646c9a; }
.se-kv__val { color: #212529; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* A bar against a total */
.se-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e7f3;
}

.se-meter > span { display: block; height: 100%; border-radius: 999px; background: #4a63e7; }
.se-meter--ok > span { background: #07875f; }
.se-meter--warn { background: #f3e0b5; }
.se-meter--warn > span { background: #c47f00; }

/* ── Lists of things (campaigns, countries): one row each, the row is the link ── */
.se-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid #f1f2f7;
}

.se-item:first-child { border-top: 0; }
.se-item:hover { background: #fafbff; }
.se-item--muted { opacity: .7; }

.se-item__logo,
.se-item__flag {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
}

.se-item__flag { box-shadow: 0 0 0 1px #e3e6f0; }
.se-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.se-item__title {
    overflow: hidden;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The title link covers the whole row */
.se-item__title::after {
    content: '';
    position: absolute;
    inset: 0;
}

.se-item__title:hover { color: #2c46b8; text-decoration: none; }

.se-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: #646c9a;
    font-size: 12.5px;
}

.se-item__sep { color: #b5b9cc; }

.se-item__side {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Only the controls of the side sit above the row link (the breakdown of a capped
   searches a day): its chips, plain searches a day and chevron open the row */
.se-item__side a,
.se-item__side button {
    position: relative;
    z-index: 1;
}

.se-item__num {
    min-width: 92px;
    color: #212529;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.se-item__num small { display: block; color: #646c9a; font-size: 11.5px; font-weight: 400; }
.se-item__chev { color: #8a8ea3; }

@media (max-width: 767.98px) {
    .se-item { grid-template-columns: auto minmax(0, 1fr); }
    .se-item__side { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
    .se-item__num { min-width: 0; text-align: left; }
}

/* ── Tables ── */
.se-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.se-table th {
    padding: 0 12px 10px;
    border-top: 0;
    border-bottom: 1px solid #ebedf2;
    color: #646c9a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: bottom;
}

.se-table th small { color: inherit; font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; }

.se-table td {
    padding: 13px 12px;
    border-top: 0;
    border-bottom: 1px solid #f1f2f7;
    color: #3f4254;
    vertical-align: middle;
}

.se-table tbody tr:last-child td { border-bottom: 0; }
.se-table tbody tr:hover td { background: #fafbff; }
.se-table th:first-child, .se-table td:first-child { padding-left: 16px; }
.se-table th:last-child, .se-table td:last-child { padding-right: 16px; }
.se-table .se-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.se-table .se-end { text-align: right; }
.se-table__strong { color: #212529; font-weight: 600; }
.se-table__muted { color: #646c9a; font-size: 12px; }
.se-table__date { line-height: 1.35; white-space: nowrap; }
.se-table__date span { display: block; color: #646c9a; font-size: 12px; }
.se-table__empty { padding: 36px 16px !important; color: #646c9a; text-align: center; }

/* Tables that become labelled cards on small screens: every cell carries a data-label
   (the searches history table has the same rules above, under se-searches-table) */
@media (max-width: 767.98px) {
    .se-table--cards thead { display: none; }

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

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

    .se-table--cards td,
    .se-table--cards td:first-child,
    .se-table--cards td:last-child {
        display: flex;
        align-items: baseline;
        gap: 4px 10px;
        padding: 4px 0;
        border: 0;
        text-align: left;
    }

    .se-table--cards td::before {
        content: attr(data-label);
        flex: 0 0 96px;
        color: #646c9a;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .06em;
        line-height: 1.8;
        text-transform: uppercase;
    }

    .se-table--cards td.se-table__empty::before { content: none; }

    /* A number reads from the left like every other value, the empty line stays centred */
    .se-table--cards td.se-num { text-align: left; }
    .se-table--cards td.se-table__empty { justify-content: center; text-align: center; }
}

/* ── Chips and positions ── */
.se-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.se-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1f2f7;
    color: #5f6378;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.se-chip--ok { background: #e3f7f0; color: #0f7a55; font-weight: 600; }
.se-chip--bad { background: #fde7ee; color: #b3213f; font-weight: 600; }
.se-chip--warn { background: #fff1d6; color: #8a5300; font-weight: 600; }
.se-chip--brand { background: #eef1ff; color: #2c3fb1; font-weight: 600; }
.se-chip--dark { background: #2a2f45; color: #fff; font-weight: 600; }
.se-chip--outline { border: 1px solid #e3e6f0; background: #fff; }
.se-chip--lg { height: 32px; padding: 0 14px; font-size: 13px; }

.se-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Where a search found the site (backend/campaign/result, backend/country/result) */
.se-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    background: #07875f;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

a .se-pos:hover,
a.se-pos:hover { color: #fff; text-decoration: none; }

.se-pos--ai { background: #4a63e7; }
.se-pos--miss { background: #fde7ee; color: #b3213f; }
a .se-pos--miss:hover { color: #b3213f; }
.se-pos--wait { background: #f1f2f7; color: #5f6378; }
a .se-pos--wait:hover { color: #5f6378; }

/* ── Callouts: every notice of a page (components/alert) ── */
.se-callout { flex-wrap: wrap; }
.se-callout--brand { color: #48465b; }
.se-callout--ok { border: 1px solid #bfe9da; background: #f0fbf7; color: #0b5a40; }
.se-callout--ok > svg { color: #07875f; }
.se-callout--bad { border: 1px solid #f4c6d2; background: #fff8fa; color: #7d1830; }
.se-callout--bad > svg { color: #b3213f; }
.se-callout--plain { border: 1px solid #ebedf2; background: #f7f8fa; color: #48465b; }
.se-callout--plain > svg { color: #5f6378; }
.se-callout--warning > svg { color: #8a5300; }
.se-callout--brand > svg { color: #2c3fb1; }
.se-callout > svg { flex: 0 0 auto; margin-top: 1px; }

.se-callout__body { flex: 1 1 260px; min-width: 0; }

/* A link in the text of a callout: underlined and semi-bold in the colour of the text, so it is
   told apart by more than Metronic's link blue, which is too light on the tinted backgrounds.
   Buttons and the links that carry their own class keep their look. */
.se-callout__body a:not([class]),
.se-callout__body a:not([class]):hover {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.se-callout--brand .se-callout__body a:not([class]),
.se-callout--plain .se-callout__body a:not([class]) { color: #2c3fb1; }

.se-callout__title {
    display: block;
    margin-bottom: 2px;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.se-callout--warning .se-callout__title { color: #4d3200; }

.se-callout__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: center;
    gap: 8px;
}

/* A page notice above the portlets (components/alert): the callout, with a bit more room */
.se-notice.se-callout {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13px;
}

.se-notice.se-callout .se-notice__dismiss {
    position: static;
    padding: 6px;
    border: 0;
    background: none;
    color: inherit;
    opacity: .6;
}

.se-notice.se-callout .se-notice__dismiss:hover,
.se-notice.se-callout .se-notice__dismiss:focus-visible { opacity: 1; }

/* On one line with its button, a notice's icon and text sit on the button's middle line. On
   phones the button goes under the text, and the icon stays with the first line. A notice with a
   title or a list (the form errors) keeps its icon on its first line. */
@media (min-width: 768px) {
    .se-notice.se-callout { align-items: center; }
    .se-notice.se-callout > svg { margin-top: 0; }

    .se-notice.se-callout:has(.se-callout__body ul, .se-callout__body ol, .se-callout__title) { align-items: flex-start; }
    .se-notice.se-callout:has(.se-callout__body ul, .se-callout__body ol, .se-callout__title) > svg { margin-top: 1px; }
}

/* A flash message that carries its own button (a .btn written into the message by a controller,
   with float-right): the text and the button on one middle line, the button on the right like the
   action of the other notices, and under the text when they do not fit side by side. */
.se-callout__body:has(> .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.se-callout__body > .btn { flex: 0 0 auto; order: 1; margin-left: auto; }

@media (max-width: 767.98px) {
    .se-callout__body > .btn { margin-left: 0; }
}

/* ── Radio list where each option is a bordered row with a title and a line ── */
.se-rlist { display: flex; flex-direction: column; gap: 8px; }

.se-ropt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid #e2e5ec;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

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

.se-ropt:has(input:checked) {
    border-color: #5d78ff;
    background: #f8f9ff;
    box-shadow: 0 0 0 3px rgba(93, 120, 255, .10);
}

.se-ropt input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #4a63e7;
}

.se-ropt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.se-ropt__title { color: #212529; font-size: 14px; font-weight: 600; }
.se-ropt__desc { color: #646c9a; font-size: 13px; line-height: 1.5; }
.se-ropt__side { margin-left: auto; align-self: center; }

/* ── Empty state of a list ── */
.se-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 20px;
    border: 1px dashed #dfe3f5;
    border-radius: 12px;
    background: #fbfbff;
    text-align: center;
}

.se-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(93, 120, 255, .15);
    color: #4a63e7;
}

.se-empty__title { color: #212529; font-size: 15px; font-weight: 600; }
.se-empty__text { max-width: 460px; margin: 0; color: #646c9a; font-size: 13px; }
.se-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* ── A light button for quiet secondary actions ── */
.se-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: #3f5bd9;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.se-linkbtn:hover { color: #2c46b8; text-decoration: underline; }
.se-linkbtn--muted { color: #646c9a; font-weight: 500; }

/* The ramp-up card above the campaign pages (components/slow-increase-applied-alert) */
.se-ramp.se-notice { margin: 0 0 20px; }

.se-ramp .se-notice__dismiss {
    position: static;
    flex-shrink: 0;
    padding: 6px;
    border: 0;
    background: none;
    color: inherit;
    opacity: .6;
}

.se-ramp .se-notice__dismiss:hover,
.se-ramp .se-notice__dismiss:focus-visible { opacity: 1; }

/* Pagination under a table */
.se-pager { display: flex; justify-content: center; margin-top: 16px; }
.se-pager .pagination { margin: 0; }
.se-searches-table .se-table__empty::before { content: none !important; }

/* ============================================================
   2026-10: campaigns pages (backend/dashboard, livewire/campaigns-list, backend/optimization-widget,
   backend/campaign/dashboard, backend/campaign/new): what the shared se- classes do not cover
   ============================================================ */

/* ── A button with an icon before its text ── */
.btn.se-campaigns-btnicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── A list of rows (se-list) as the body of a portlet: the rows line up with the portlet head ── */
.kt-portlet__body.se-campaigns-listbody { padding: 8px 9px; }
.se-campaigns-listbody > .se-empty { margin: 17px 16px; }
.se-campaigns-listbody > .se-pager { margin: 8px 16px 12px; }

@media (max-width: 1024px) {
    .kt-portlet__body.se-campaigns-listbody { padding: 6px 0; }
    .se-campaigns-listbody > .se-empty { margin: 9px 15px; }
    .se-campaigns-listbody > .se-pager { margin: 8px 15px 12px; }
}

/* ── Campaigns list (livewire/campaigns-list): the head holds the filter, the status and "Create" ── */
.kt-portlet__head.se-campaigns-head {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.kt-portlet__head-toolbar.se-campaigns-toolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.se-campaigns-search { flex: 0 1 260px; min-width: 0; }
.se-campaigns-search .kt-input-icon__icon { color: #646c9a; }
.se-campaigns-status.form-control { flex: 0 0 190px; width: 190px; }

@media (max-width: 767.98px) {
    .kt-portlet__head-toolbar.se-campaigns-toolbar { flex: 1 1 100%; justify-content: stretch; }
    .se-campaigns-search { flex: 1 1 100%; }
    .se-campaigns-status.form-control { flex: 1 1 150px; width: auto; }
    .se-campaigns-toolbar .btn { flex: 1 1 auto; }
}

/* ── Optimization score (backend/optimization-widget): the side panel of the statistics ── */
.se-optim__score { display: flex; flex-direction: column; gap: 10px; }

.se-optim__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

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

.se-optim__value {
    color: #212529;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* One pending point at a time, as a soft card */
.se-optim__tip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #fafbfd;
}

.se-optim__tip-top {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.se-optim__icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff1d6;
    color: #8a5300;
}

.se-optim__icon--ok { background: #e3f7f0; color: #07875f; }

.se-optim__name {
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

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

.se-optim__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.se-optim__count { color: #646c9a; font-size: 13px; }
.se-optim__arrows { display: flex; gap: 6px; }
.se-optim__arrows .btn:disabled { opacity: .45; cursor: default; }

/* ── New campaign (backend/campaign/new) ── */
/* The four engines as cards on two columns, one under the other on a phone: the logo, the name and
   a check on the first line, a line under it. The radio itself is visually hidden, the card shows its state. */
.se-campaigns-engines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 767.98px) {
    .se-campaigns-engines { grid-template-columns: minmax(0, 1fr); }
}

.se-campaigns-engine {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid #e2e5ec;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

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

.se-campaigns-engine:has(input:checked) {
    border-color: #5d78ff;
    background: #f8f9ff;
    box-shadow: 0 0 0 3px rgba(93, 120, 255, .12);
}

.se-campaigns-engine:has(input:focus-visible) { outline: 2px solid #366cf3; outline-offset: 2px; }

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

.se-campaigns-engine__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.se-campaigns-engine__logo { display: inline-flex; flex: 0 0 auto; }

.se-campaigns-engine__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-left: auto;
    border: 1.5px solid #d3d8e6;
    border-radius: 50%;
    background: #fff;
    color: transparent;
}

.se-campaigns-engine:has(input:checked) .se-campaigns-engine__check {
    border-color: #4a63e7;
    background: #4a63e7;
    color: #fff;
}

.se-campaigns-engine__title {
    min-width: 0;
    color: #212529;
    font-size: 14.5px;
    font-weight: 600;
}

.se-campaigns-engine__desc {
    color: #646c9a;
    font-size: 12.5px;
    line-height: 1.5;
}

.se-chip.se-campaigns-beta {
    height: 20px;
    margin-left: 6px;
    padding: 0 8px;
    font-size: 11px;
    vertical-align: 1px;
}

/* The last section ends on the foot of the form: no second padding under it */
.se-campaigns-newform .se-section:last-child { padding-bottom: 0; }

.kt-portlet__foot.se-campaigns-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.se-campaigns-foot__hint { color: #646c9a; font-size: 13px; }

/* ── "Add a country" modal of the campaign page ── */
#addCountryModal .modal-title { color: #212529; font-size: 16px; font-weight: 600; }

.se-campaigns-modal-close.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #48465b;
}

.se-campaigns-modal-intro {
    margin-bottom: 20px;
    color: #646c9a;
    font-size: 13px;
}

.se-campaigns-optional {
    margin-left: 4px;
    color: #646c9a;
    font-size: 12px;
    font-weight: 400;
}

.se-campaigns-modal-target { margin-top: 14px; }
.se-campaigns-modal-target strong { color: #212529; font-weight: 600; }

/* The searches a day of the rows line up in one column */
.se-campaigns-listbody .se-item__side .se-perday { min-width: 166px; justify-content: center; }

@media (max-width: 767.98px) {
    .se-campaigns-listbody .se-item__side .se-perday { min-width: 0; }
}

/* On a phone the buttons of the modal keep their text on one line: Magic Configuration on its own row */
@media (max-width: 575.98px) {
    #addCountryModal .modal-footer { flex-wrap: wrap; }
    #addCountryModal .modal-footer .btn { flex: 1 1 auto; white-space: nowrap; }
    #addCountryModal .modal-footer #magicBtn { flex-basis: 100%; }
}

/* ── Keywords Auto-Discovery and Magic Configuration (backend/campaign/keywords-auto-discovery, magic):
   what the feature does and its action on the left, how it goes on the right ── */
.se-discovery {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px 56px;
    align-items: start;
}

.se-discovery__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.se-discovery__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.se-discovery__icon {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef1ff;
    color: #3f5bd9;
}

.se-discovery__title {
    margin: 0;
    color: #212529;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.se-discovery__lead {
    max-width: 640px;
    margin: 0;
    color: #595d6e;
    font-size: 15px;
    line-height: 1.65;
}

.se-discovery__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 4px;
}

.se-discovery__actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
}

.se-discovery__hint {
    max-width: 560px;
    margin: 0;
    color: #646c9a;
    font-size: 13px;
    line-height: 1.55;
}

.se-discovery__side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid #ebedf2;
    border-radius: 12px;
    background: #fafbfd;
}

.se-discovery__side-title {
    margin: 0;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.se-discovery__side .se-linkbtn { align-self: flex-start; }

/* What the feature sets up, as check lines */
.se-discovery-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-discovery-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3f4254;
    font-size: 14px;
    line-height: 1.55;
}

.se-discovery-checks svg { flex: 0 0 auto; margin-top: 2px; color: #07875f; }

/* Numbered or iconed steps, one bordered row each */
.se-discovery-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-discovery-step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    background: #fff;
}

.se-discovery-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f2f7;
    color: #5f6378;
    font-size: 13px;
    font-weight: 500;
}

.se-discovery-step__title { display: block; color: #212529; font-size: 14px; font-weight: 600; }
.se-discovery-step__sub { display: block; color: #646c9a; font-size: 12.5px; line-height: 1.5; }

/* The Search Console connection of the campaign: account, property, mode, and "Change" */
.se-discovery-conn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    align-self: stretch;
    max-width: 640px;
    padding: 16px 18px;
    border: 1px solid #e3e6f0;
    border-radius: 12px;
    background: #fff;
}

.se-discovery-conn__icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e3f7f0;
    color: #07875f;
}

.se-discovery-conn__body {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.se-discovery-conn__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.se-discovery-conn__list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
}

.se-discovery-conn__list dt { color: #646c9a; font-weight: 400; }
.se-discovery-conn__list dd { margin: 0; color: #212529; font-weight: 500; overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    .se-discovery { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .se-discovery__side { padding: 18px 16px; }
    .se-discovery__title { font-size: 20px; }
    .se-discovery-conn { align-items: flex-start; }
    .se-discovery-conn__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .se-discovery-conn__list dd + dt { margin-top: 6px; }
}

/* ── Waiting pages (backend/campaign/keywords-auto-discovery-waiting, backend/country/keywords-waiting):
   the one-message page of auth/verify-v2 (dl- classes), with the progress of the retrieval ── */
/* After demo-launch-20261002.css, whose .dl-live-lead has no margin */
.dl-head .se-discovery-wait__lead { margin-top: 10px; font-size: 16px; }
.dl-hero-badge.se-discovery-wait__badge--run { color: #2c3fb1; }

.se-discovery-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    padding: 16px 18px;
    border: 1px solid #c9d1ff;
    border-radius: 12px;
    background: #f8f9ff;
    text-align: left;
}

.se-discovery-progress .se-meter > span { transition: width .4s ease; }

.se-discovery-progress__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.se-discovery-progress__label { color: #48465b; font-size: 13px; }
.se-discovery-progress__time { color: #212529; font-size: 15px; font-weight: 600; }

/* The country whose keywords are being retrieved */
.se-discovery-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    padding: 12px 14px;
    border: 1px solid #c9d1ff;
    border-radius: 10px;
    background: #f8f9ff;
    text-align: left;
}

.se-discovery-row__flag {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 0 0 1px #e3e6f0;
}

.se-discovery-row__title { display: block; color: #212529; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.se-discovery-row__sub { display: block; color: #646c9a; font-size: 12.5px; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .se-discovery-progress .se-meter > span { transition: none; }
}

/* ── The Search Console modal (layouts/gsc_linking_modal) ── */
#gscModal .modal-content { border: 0; border-radius: 14px; }
#gscModal .modal-header { align-items: flex-start; padding: 22px 26px 6px; border-bottom: 0; }
#gscModal .modal-title { color: #212529; font-size: 17px; font-weight: 600; }
#gscModal .modal-header .close { display: inline-flex; margin: -6px -8px 0 auto; padding: 6px; color: #646c9a; opacity: 1; }
#gscModal .modal-header .close:hover { color: #212529; }
#gscModal .modal-body { padding: 10px 26px 8px; }
#gscModal .modal-footer { padding: 14px 26px 22px; border-top: 0; }

.se-discovery-modal__intro { margin: 0 0 20px; color: #646c9a; font-size: 13px; line-height: 1.55; }
.se-discovery-modal__label { display: block; margin-bottom: 6px; color: #282a3c; font-size: 14px; font-weight: 600; }
.se-discovery-modal__add { margin-top: 10px; }

#gscModal .btn-sm,
#gscModal #disconnect_account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#gscModal #disconnect_account {
    justify-content: center;
    width: 44px;
    border-color: #f4c6d2;
    background: #fff;
    color: #b3213f;
}

#gscModal #disconnect_account:hover:not(:disabled) { background: #fff8fa; border-color: #e99bb0; }
#gscModal #disconnect_account:disabled { border-color: #e2e5ec; color: #a2a5b9; }

/* ── Country pages (backend/country/dashboard, keywords, keyword) and the search log of a
   Google Business Profile campaign (backend/country/log-google-gmb) ── */

/* A portlet head holding a title, then a search field and a button */
.kt-portlet__head.se-country-kwhead {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.se-country-kwtools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* A search field with its icon inside */
.se-country-search {
    position: relative;
    width: 240px;
    max-width: 100%;
}

.se-country-search svg {
    position: absolute;
    top: 50%;
    left: 12px;
    color: #8a8ea3;
    transform: translateY(-50%);
    pointer-events: none;
}

.se-country-search .form-control {
    height: 36px;
    padding-left: 34px;
    font-size: 13px;
}

.btn.se-country-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    font-weight: 600;
    white-space: nowrap;
}

/* The keyword: the title of its row */
.se-country-kwlink {
    color: #212529;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.se-country-kwlink:hover { color: #2c46b8; }

/* The link to the position history of a keyword */
.se-country-hist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* What the position chips of the table mean, under it */
.se-country-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #f1f2f7;
    list-style: none;
    color: #646c9a;
    font-size: 12.5px;
}

.se-country-legend li { display: inline-flex; align-items: center; gap: 8px; }
.se-country-legend .se-pos { height: 24px; min-width: 24px; padding: 0 8px; font-size: 11.5px; }

/* When the three fit on one line: the first on the left, the second in the middle, the last on the right */
@media (min-width: 1400px) {
    .se-country-legend { flex-wrap: nowrap; justify-content: space-between; }
    .se-country-legend li { flex: 0 0 auto; min-width: 0; }
    .se-country-legend li:first-child { flex-shrink: 1; }
}

/* ── The keywords DataTables (dashboard, Keywords Auto-Discovery): the table in the se-table look,
   the info, the page length and the pager on one line under it ── */
table.dataTable.se-table {
    margin: 0 !important;
    border-collapse: separate !important;
}

table.dataTable.se-table thead > tr > th.sorting,
table.dataTable.se-table thead > tr > th.sorting_asc,
table.dataTable.se-table thead > tr > th.sorting_desc {
    padding-right: 26px;
}

table.dataTable.se-table thead .sorting::before,
table.dataTable.se-table thead .sorting::after,
table.dataTable.se-table thead .sorting_asc::before,
table.dataTable.se-table thead .sorting_asc::after,
table.dataTable.se-table thead .sorting_desc::before,
table.dataTable.se-table thead .sorting_desc::after {
    bottom: 10px;
    font-size: 12px;
    opacity: .25;
}

table.dataTable.se-table thead .sorting_asc::before,
table.dataTable.se-table thead .sorting_desc::after {
    color: #2c3fb1;
    opacity: 1;
}

table.dataTable.se-table th.se-end.sorting,
table.dataTable.se-table th.se-end.sorting_asc,
table.dataTable.se-table th.se-end.sorting_desc {
    text-align: right;
}

table.dataTable.se-table td.dataTables_empty {
    padding: 8px 0 0;
    border-bottom: 0;
    background: none;
    text-align: center;
}

table.dataTable.se-table tbody tr:hover td.dataTables_empty { background: none; }

.dataTables_wrapper .se-country-dtfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 16px;
}

.dataTables_wrapper .se-country-dtinfo .dataTables_info {
    padding: 0;
    color: #646c9a;
    font-size: 12.5px;
}

.dataTables_wrapper .se-country-dtnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.dataTables_wrapper .se-country-dtnav .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #646c9a;
    font-size: 12.5px;
}

.dataTables_wrapper .se-country-dtnav .dataTables_length select {
    width: auto;
    height: 34px;
    padding: 0 28px 0 10px;
    border-radius: 8px;
    font-size: 12.5px;
}

.dataTables_wrapper .se-country-dtnav .pagination { margin: 0; }

.dataTables_wrapper .se-country-dtnav .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 12.5px;
}

.dataTables_wrapper .se-country-dtnav .page-item.disabled .page-link { opacity: .45; }

/* "Loading the keywords" floats over the table it loads, not over the chart further up the page */
.dataTables_wrapper { position: relative; }

.dataTables_wrapper div.dataTables_processing.card {
    top: 60px;
    z-index: 2;
    margin-top: 0;
    padding: 10px 0;
    border: 1px solid #ebedf2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(40, 42, 60, .08);
    color: #2c3fb1;
    font-size: 12.5px;
    font-weight: 600;
}

/* Phones: one card per keyword, the keyword and its position on the first line, the searches a
   day and the history link on the second */
@media (max-width: 767.98px) {
    .kt-portlet__head.se-country-kwhead .kt-portlet__head-label,
    .se-country-kwtools,
    .se-country-search { width: 100%; }

    .se-country-kwtools .se-country-search { flex: 1 1 0; width: auto; }

    .se-table--cards.se-country-kwtable tr {
        display: grid;
        grid-template-areas: "kw pos" "rate hist";
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 14px;
    }

    .se-table--cards.se-country-kwtable td,
    .se-table--cards.se-country-kwtable td:first-child,
    .se-table--cards.se-country-kwtable td:last-child { display: block; padding: 0; }

    .se-table--cards.se-country-kwtable td::before { display: none; }
    .se-table--cards.se-country-kwtable .se-country-kwtable__kw { grid-area: kw; }
    .se-table--cards.se-country-kwtable .se-country-kwtable__pos { grid-area: pos; text-align: right; }
    .se-table--cards.se-country-kwtable .se-country-kwtable__hist { grid-area: hist; text-align: right; }
    .se-table--cards.se-country-kwtable .se-country-kwtable__rate { grid-area: rate; }
    .se-table--cards.se-country-kwtable .se-country-kwtable__rate::before { display: block; margin-bottom: 4px; }

    .se-table--cards td.dataTables_empty::before { content: none; }
    .se-table--cards tr:has(td.dataTables_empty) { padding: 0; border: 0; }

    .dataTables_wrapper .se-country-dtfoot { flex-direction: column; align-items: flex-start; }
}

/* ── Country keywords (backend/country/keywords) ── */

/* The mode of the keywords (manual, Keywords Auto-Discovery), above them */
.se-callout.se-country-mode {
    margin: 0 0 30px;
    padding: 16px 18px;
    border-radius: 10px;
}

.se-country-desc { margin-top: 8px; }

/* The head of a table inside a portlet body: its title, then its search field */
.se-country-tablehead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.se-country-tablehead__title {
    margin: 0;
    color: #282a3c;
    font-size: 1.15rem;
    font-weight: 600;
}

/* The status of a keyword under Keywords Auto-Discovery */
.form-control.se-country-status {
    width: 140px;
    max-width: 100%;
    height: 34px;
    border-radius: 8px;
    font-size: 12.5px;
}

.form-control.se-country-status--off {
    border-color: #f4c6d2;
    background-color: #fff8fa;
    color: #b3213f;
}

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

/* The keyword editor (components/keyword-editor): one row per keyword */
.se-keyword-editor__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 40px;
    align-items: center;
    gap: 10px;
}

.se-keyword-editor__head {
    margin-bottom: 8px;
    color: #646c9a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.se-keyword-editor__head span:nth-child(2) { text-align: right; }

.se-keyword-editor__item + .se-keyword-editor__item { margin-top: 8px; }

.se-keyword-editor__row .form-control { height: 40px; }

/* The column of the row sets the width (serp-ui still gives the input the 150px of the old table) */
.se-keyword-editor__row .se-keyword-editor__rate { width: 100%; }

.se-keyword-editor__rate {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A rate that is not a number: the red border and the line under the row say it. The field is
   too narrow for Bootstrap's icon, which would sit on the digits. */
.se-keyword-editor__row .se-keyword-editor__rate.is-invalid {
    padding-right: 1rem;
    background-image: none;
}

.se-keyword-editor__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #646c9a;
    cursor: pointer;
}

.se-keyword-editor__remove:hover {
    background: #fff8fa;
    color: #b3213f;
}

.se-keyword-editor__dup {
    display: block;
    margin-top: 4px;
    color: #b3213f;
    font-size: 12px;
}

.se-keyword-editor__text { font-variant-numeric: tabular-nums; }

.se-keyword-editor .se-keyword-editor__footer {
    gap: 10px 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ebedf2;
}

.btn.se-keyword-editor__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.btn.se-keyword-editor__mode {
    border: 0;
    background: none;
    color: #48465b;
}

.btn.se-keyword-editor__mode:hover {
    background: #f4f6ff;
    color: #2c3fb1;
}

.se-keyword-editor__total strong { color: #2c3fb1; }

.se-keyword-editor__cap { flex: 0 0 100%; }

.se-keyword-editor__over {
    margin: 8px 0 0;
    color: #8a5300;
    font-size: 12.5px;
}

@media (max-width: 767.98px) {
    .se-keyword-editor__row {
        grid-template-columns: minmax(0, 1fr) 72px 32px;
        gap: 8px;
    }

    .se-keyword-editor__row .form-control { padding: 0 12px; }
    .se-keyword-editor__row .se-keyword-editor__rate.is-invalid { padding-right: 12px; }
    .se-keyword-editor__remove { width: 32px; }
    .se-keyword-editor__head span:nth-child(2) { white-space: nowrap; }
    .se-keyword-editor__total { width: 100%; margin-left: 0; }
}

/* ── Search log of a Google Business Profile campaign (backend/country/log-google-gmb) ── */

/* The results, and the knowledge panel beside them on wide screens */
.se-gbp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 20px;
}

@media (max-width: 1199.98px) {
    .se-gbp-split { grid-template-columns: minmax(0, 1fr); }
}

/* The local pack: its places framed together, at the top of the results */
.se-gbp-pack {
    margin: 0 0 10px;
    padding: 6px 0;
    border: 1px solid #e3e6f0;
    border-radius: 12px;
    background: #fbfbfe;
}

.se-gbp-pack__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    color: #6c7086;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.se-gbp-pack .se-serp-row { margin-right: 6px; margin-left: 6px; }

.se-gbp-pack__foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 16px 6px;
    padding-top: 10px;
    border-top: 1px solid #ebedf2;
    color: #5f6378;
    font-size: 12px;
}

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

/* A place of a list: its rating, address and website on one line under its name */
.se-serp-row__dest.se-gbp-place__dest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    white-space: normal;
}

.se-gbp-place__sep { color: #b5b9cc; }

/* The rating of a place: the note, then five stars */
.se-gbp-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3f4254;
    font-weight: 600;
}

.se-gbp-rating--lg { font-size: 14px; }

.se-gbp-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #e8a100;
}

.se-gbp-star__off { fill: #dfe2ea; }

/* A row of a list: the note and one star */
.se-gbp-rating > .se-gbp-star { margin-left: -2px; color: #e8a100; }

/* A business as Google shows it (knowledge panel, business page): name, rating, summary, details */
.se-gbp-biz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px;
    border: 1px solid #e3e6f0;
    border-radius: 12px;
    background: #fff;
}

.se-gbp-biz--mine {
    border-color: #9fdcc6;
    box-shadow: 0 0 0 3px rgba(7, 135, 95, .08);
}

.se-gbp-biz__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    width: 100%;
}

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

.se-gbp-biz__name {
    color: #212529;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

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

.se-gbp-biz__summary {
    margin: 0;
    color: #48465b;
    font-size: 13px;
    line-height: 1.55;
}

.se-kv.se-gbp-biz__facts {
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid #ebedf2;
}

.se-gbp-biz__facts .se-kv__val {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.se-gbp-page { max-width: 560px; }

@media (max-width: 767.98px) {
    .se-gbp-biz { padding: 16px; }
    .se-gbp-pack .se-serp-row { margin-right: 4px; margin-left: 4px; }
}

/* ============================================================
   Account pages: profile, subscription, credit history, invoices, API & MCP, affiliation
   (mockups: Profile, Subscription, CreditHistory, Invoices, Api, Affiliation). The pages are
   settings sections (se-section) in one portlet under the account nav (backend/account/header).
   ============================================================ */

/* ── Shared ── */

/* The fields of a section keep a readable width inside the wide column */
.se-account-fields { max-width: 560px; }
.se-account-fields .form-group { margin-bottom: 22px; }

/* The submit button of a section's form, and what goes with it */
.se-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.se-account-actions .btn,
.se-account-combo .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.se-account-note {
    color: #646c9a;
    font-size: 13px;
}

/* An input and its button side by side */
.se-account-combo {
    display: flex;
    gap: 8px;
}

.se-account-combo .form-control { flex: 1 1 auto; min-width: 0; }
.se-account-combo .btn { flex: 0 0 auto; }
.se-account-combo .form-control[readonly] { background: #f7f8fa; color: #48465b; }

/* The title of a page made of one table (credit history, invoices), its line and its action */
.se-account-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 22px;
}

.se-account-intro__title {
    margin: 0 0 4px;
    color: #282a3c;
    font-size: 1.15rem;
    font-weight: 600;
}

.se-account-intro__text {
    margin: 0;
    color: #646c9a;
    font-size: 13px;
    line-height: 1.55;
}

.se-account-intro .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

/* Running text and sub-headings inside a section (API reference, affiliation) */
.se-account-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.se-account-group + .se-account-group { margin-top: 30px; }

.se-account-h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: #282a3c;
    font-size: 14px;
    font-weight: 600;
}

.se-account-text {
    margin: 0;
    color: #48465b;
    font-size: 13.5px;
    line-height: 1.65;
}

/* A dialog of the account pages (change the email address) */
.se-account-modal .modal-content { border: 0; border-radius: 12px; }
.se-account-modal .modal-header { align-items: center; padding: 20px 26px; }
.se-account-modal .modal-content .modal-header .modal-title { color: #282a3c; font-size: 1.1rem; font-weight: 600; }
.se-account-modal .modal-header .close { display: inline-flex; margin: -6px -8px -6px auto; padding: 6px; color: #646c9a; opacity: 1; }
.se-account-modal .modal-header .close:hover { color: #282a3c; }
.se-account-modal .modal-body { padding: 22px 26px; }
.se-account-modal .modal-body label { color: #282a3c; font-size: 14px; font-weight: 600; }
.se-account-modal .modal-footer { padding: 16px 26px; }

.se-account-modal__lead {
    margin: 0 0 18px;
    color: #646c9a;
    font-size: 13px;
    line-height: 1.55;
}

/* ── Profile ── */

/* Strength of the new password (zxcvbn score 0-4) as four bars */
.se-profile-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.se-profile-strength[hidden] { display: none; }

.se-profile-strength__bars {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.se-profile-strength__bars span { height: 6px; border-radius: 999px; background: #e3e7f3; }
.se-profile-strength__label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.se-profile-strength--bad .is-on { background: #d6375a; }
.se-profile-strength--bad .se-profile-strength__label { color: #b3213f; }
.se-profile-strength--warn .is-on { background: #c47f00; }
.se-profile-strength--warn .se-profile-strength__label { color: #8a5300; }
.se-profile-strength--ok .is-on { background: #07875f; }
.se-profile-strength--ok .se-profile-strength__label { color: #07875f; }

/* ── Subscription ── */

/* The plan the customer pays for, with its two actions */
.se-subscription-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 22px;
    border: 1px solid #ebedf2;
    border-radius: 12px;
    background: #fafbfd;
}

.se-subscription-plan__id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.se-subscription-plan__name {
    color: #212529;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.se-subscription-plan__meta { color: #48465b; font-size: 13.5px; }

/* The temporary plan chip names two plans: it wraps on a phone */
.se-subscription-plan .se-chip {
    height: auto;
    min-height: 24px;
    padding: 4px 10px;
    line-height: 1.35;
    white-space: normal;
}

.se-subscription-plan__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.se-subscription-plan__actions .btn {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Searches left: the balance and its meter, the figures beside it */
.se-subscription-runway {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 24px 44px;
    align-items: start;
}

.se-subscription-runway__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 10px;
}

.se-subscription-runway__left {
    color: #212529;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* How long the balance lasts: on track, running low, out, or not used */
.se-subscription-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.se-subscription-status svg { flex: 0 0 auto; margin-top: 2px; }
.se-subscription-status--enough { color: #0b5a40; }
.se-subscription-status--enough svg { color: #07875f; }
.se-subscription-status--low { color: #6b4500; font-weight: 500; }
.se-subscription-status--low svg { color: #c47f00; }
.se-subscription-status--out { color: #7d1830; font-weight: 500; }
.se-subscription-status--out svg { color: #b3213f; }
.se-subscription-status--idle { color: #646c9a; }

/* The next plan up, when the balance runs out before the renewal */
.se-subscription-upgrade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 14px;
}

.se-subscription-figures { margin: 0; }
.se-subscription-figures dt,
.se-subscription-figures dd { margin: 0; }
.se-subscription-figures .se-kv__key { font-size: 13px; font-weight: 400; }

/* Automatic top-up: the switch, then the pack and the threshold while it is on */
.se-subscription-topup {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 680px;
}

.se-subscription-topup .se-field__label { display: flex; align-items: center; gap: 6px; }

.se-subscription-topup__settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.se-subscription-topup__settings .se-callout { margin-top: 0; }

/* Two fields on one row, the first one wider (top-up pack and threshold) */
.se-subscription-pair {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 18px;
}

.se-subscription-foot { padding-top: 16px; padding-bottom: 16px; }
.se-subscription-foot .se-linkbtn { font-size: 13px; }

/* The switch of the automatic top-up comes first, its label and line beside it */
.se-field--row.se-subscription-switchrow {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
}

.se-subscription-switchrow .kt-switch { margin-top: -2px; }

/* The head of the plan grid: an icon circle and the title */
.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title.se-subscription-plans__title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #212529;
    font-size: 16px;
    font-weight: 600;
}

.se-subscription-plans__icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef1ff;
    color: #3f5bd9;
}

/* The plan grid, folded for a paying customer: Metronic's display: flex on a portlet body
   otherwise beats Bootstrap's .collapse, and the grid was never folded */
.kt-portlet .kt-portlet__body.se-subscription-plans.collapse:not(.show) { display: none; }

.se-subscription-unfold { display: inline-flex; align-items: center; gap: 6px; }
.se-subscription-unfold[hidden] { display: none; }

/* Folded, the head of the plans block is one big "Show all plans" (subscription page script) */
.se-subscription-folded .kt-portlet__head { cursor: pointer; }
.se-subscription-folded .kt-portlet__head:hover .se-subscription-plans__title { color: #2c3fb1; }

@media (max-width: 991.98px) {
    .se-subscription-runway { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .se-subscription-plan { padding: 16px; }
    .se-subscription-plan__actions { flex: 1 1 100%; flex-direction: column; }
    .se-subscription-plan__name,
    .se-subscription-runway__left { font-size: 20px; }
    .se-subscription-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ── Credit history ── */

/* A signed amount: what was credited in green, a debit in the text colour */
.se-credits-amount { color: #212529; font-weight: 600; font-variant-numeric: tabular-nums; }
.se-credits-amount--in { color: #07875f; }

/* Under the table: how many movements are shown, then the pages */
.se-pager.se-credits-pager {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.se-credits-pager__count { color: #646c9a; font-size: 13px; }

/* ── Invoices ── */

/* The link of an invoice row: the PDF to download, or the receipt of the payment provider */
.se-invoices-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.se-invoices-promo { margin-top: 24px; }

/* ============================================================
   API & MCP and Affiliation pages (mockups: Api, Affiliation): settings sections (se-section) in
   one portlet under the account nav (backend/account/header). Running text, sub-headings, the
   input and its button come from the account pages (se-account-text, -h, -group, -combo, -actions).
   ============================================================ */

/* ── API & MCP ── */

/* What the page is for, then the links to its three parts (the first section's border closes it) */
.se-api-toc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 22px;
}

.se-api-toc__intro {
    max-width: 860px;
    margin: 0;
    color: #48465b;
    font-size: 13.5px;
    line-height: 1.65;
}

.se-api-toc__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.se-api-toc__label {
    margin-right: 4px;
    color: #646c9a;
    font-size: 12.5px;
    font-weight: 500;
}

.se-api-toc__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.se-api-toc__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid #e3e6f0;
    border-radius: 999px;
    color: #3f4254;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.se-api-toc__link:hover {
    border-color: #b9c2ff;
    color: #2c3fb1;
    text-decoration: none;
}

/* The content of a section, one block under the other */
.se-api-body,
.se-affiliation-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.se-api-body > .se-callout,
.se-affiliation-body > .se-callout,
.se-api-body > .se-account-group,
.se-affiliation-body > .se-account-group { margin-top: 0; }

.se-api-hint,
.se-affiliation-hint {
    margin: 0;
    color: #646c9a;
    font-size: 13px;
    line-height: 1.55;
}

.se-api-hint .se-chip { height: 20px; }

/* Inline code of the reference */
.se-api code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f2f7;
    color: #2a2f45;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.se-api .se-account-text code { white-space: nowrap; }

/* A block of code: scrolls sideways rather than wraps */
.se-api-code {
    display: block;
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    background: #f7f8fa;
    color: #2a2f45;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre;
}

.se-api-code--inline {
    margin-top: 8px;
    padding: 10px 14px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The one-time token and its Copy button: the button goes under it when narrow */
.se-api-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.se-api-copy__value {
    flex: 1 1 300px;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid #bfe9da;
    border-radius: 8px;
    background: #fff;
    color: #2a2f45;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.se-api-copy .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-width: 150px;
    justify-content: center;
}

/* Create a token: name and expiry on one row, the permissions as two option cards */
.se-api-create {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.se-api-create .form-group { margin: 0; }

.se-api-pair {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 18px;
}

.se-api-scopes {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.se-api-scopes > legend.se-field__label { width: auto; margin-bottom: 8px; padding: 0; }

.se-api-scopes .se-rlist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Your tokens */
.se-api-count {
    color: #646c9a;
    font-size: 13px;
    font-weight: 500;
}

.se-api-tokens .se-api-nowrap { white-space: nowrap; }

.se-api-expired {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* Reference tables (endpoints, MCP tools): a method and its path, several tool names */
.se-api-endpoint {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.se-api-codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.se-api-reftbl td { padding-top: 10px; padding-bottom: 10px; }
.se-api-needs { justify-content: flex-end; }

.se-api-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: #f1f2f7;
    color: #3f4254;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
}

.se-api-method--get { background: #e3f7f0; color: #0f7a55; }
.se-api-method--post { background: #eef1ff; color: #2c3fb1; }
.se-api-method--patch { background: #fff1d6; color: #8a5300; }
.se-api-method--delete { background: #fde7ee; color: #b3213f; }

/* Numbered steps (connect an MCP client) */
.se-api-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: se-api-step;
}

.se-api-steps > li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: #48465b;
    font-size: 13.5px;
    line-height: 1.6;
}

.se-api-steps > li::before {
    content: counter(se-api-step);
    counter-increment: se-api-step;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef1ff;
    color: #2c3fb1;
    font-size: 12.5px;
    font-weight: 600;
}

.se-api-steps__text { display: block; min-width: 0; padding-top: 3px; }

/* Things to ask an assistant */
.se-api-prompts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-api-prompts > li {
    padding: 10px 14px;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    background: #fafbfd;
    color: #2a2f45;
    font-size: 13.5px;
}

@media (max-width: 767.98px) {
    .se-api-pair { grid-template-columns: minmax(0, 1fr); }

    /* The token cards: the chips and the Revoke button keep their own width */
    .se-api-tokens.se-table--cards td { align-items: center; }

    /* Reference tables stay a compact list: the name, its description under it, what it needs on the right */
    .se-api-reftbl.se-table--cards tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 12px;
        margin: 0;
        padding: 10px 2px;
        border: 0;
        border-bottom: 1px solid #f1f2f7;
        border-radius: 0;
    }

    .se-api-reftbl.se-table--cards td {
        display: block;
        width: auto;
        padding: 0;
    }

    .se-api-reftbl.se-table--cards td::before { content: none; }

    .se-api-reftbl.se-table--cards td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        color: #646c9a;
        font-size: 12.5px;
    }

    .se-api-reftbl.se-table--cards td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Affiliation ── */

/* The rate tiers, the customer's own one marked */
.se-affiliation-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-affiliation-tier {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    border: 1.5px solid #e2e5ec;
    border-radius: 10px;
    background: #fff;
}

.se-affiliation-tier--on {
    border-color: #5d78ff;
    background: #f8f9ff;
    box-shadow: 0 0 0 3px rgba(93, 120, 255, .10);
}

.se-affiliation-tier__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}

.se-affiliation-tier__range { color: #48465b; font-size: 12.5px; font-weight: 500; }

.se-affiliation-tier__rate {
    color: #212529;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.se-affiliation-tier__sub { color: #646c9a; font-size: 12px; }

/* The affiliate terms: a real disclosure */
.se-affiliation-terms {
    border: 1px solid #ebedf2;
    border-radius: 10px;
    background: #fff;
}

.se-affiliation-terms > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #282a3c;
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.se-affiliation-terms > summary::-webkit-details-marker { display: none; }
.se-affiliation-terms > summary:hover { color: #2c3fb1; }
.se-affiliation-terms > summary:focus-visible { outline: 2px solid #5d78ff; outline-offset: 2px; }
.se-affiliation-terms > summary svg { flex: 0 0 auto; color: #646c9a; transition: transform .15s ease; }
.se-affiliation-terms[open] > summary svg { transform: rotate(180deg); }

.se-affiliation-terms__body {
    padding: 0 16px 14px;
    color: #48465b;
    font-size: 13px;
    line-height: 1.6;
}

.se-affiliation-terms__body ul { margin: 0; padding-left: 18px; }
.se-affiliation-terms__body li + li { margin-top: 4px; }

/* The referral link keeps the width of a form field */
.se-affiliation-link { max-width: 640px; }

.se-affiliation-link .form-control {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.se-affiliation-share .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* The five referral figures on one row; three then two, then two by two with the last one across */
.se-affiliation-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    .se-affiliation-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .se-affiliation-stats > .se-stat:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 575.98px) {
    .se-affiliation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .se-affiliation-stats > .se-stat:nth-child(5) { grid-column: 1 / -1; }
}

/* The link and its Copy button: the button goes under it when narrow */
.se-affiliation-link .se-account-combo { flex-wrap: wrap; }
.se-affiliation-link .se-account-combo .form-control { flex: 1 1 300px; }

/* Keeps a short phrase on one line ("sign-up", a date) */
.se-affiliation-nowrap { white-space: nowrap; }

/* ============================================================
   Leaving pages (mockups CancelSubscription, CancelOffer, CloseAccount): cancel the subscription,
   the save offers and close the account (backend/account/subscription-cancel,
   subscription-cancel-offer, close). Then the one-message pages of the account (closed, logout,
   email_verified, optout), in the auth/verify-v2 pattern (dl- classes of demo-launch).
   ============================================================ */

/* ── One centred portlet ── */
.kt-portlet.se-leave-shell {
    width: 100%;
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

.kt-portlet.se-leave-shell--wide { max-width: 980px; }

.kt-portlet.se-leave-shell > .kt-portlet__body,
.kt-portlet.se-leave-shell > form > .kt-portlet__body {
    gap: 24px;
    padding: 28px 30px 30px;
}

.kt-portlet.se-leave-shell .kt-portlet__foot { padding: 16px 30px; }

.se-leave-title {
    margin: 0;
    color: #212529;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.se-leave-lead {
    max-width: 700px;
    margin: 8px 0 0;
    color: #595d6e;
    font-size: 14px;
    line-height: 1.6;
    text-wrap: pretty;
}

.se-leave-lead + .se-leave-lead { margin-top: 10px; }
.se-leave-lead strong { color: #212529; font-weight: 600; white-space: nowrap; }

/* The callouts of these pages sit in the flow of the body (the base one has a top margin) */
.se-leave-shell .se-callout { margin: 0; padding: 14px 16px; border-radius: 10px; }
.se-leave-shell .se-callout__title { text-wrap: balance; }
.se-leave-link { font-weight: 600; }

/* ── The reasons: a fieldset with its question as the legend ── */
.se-leave-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.se-leave-legend {
    display: block;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    color: #282a3c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.se-leave-reasons .se-ropt { align-items: center; padding: 12px 16px; }
.se-leave-reasons .se-ropt input { margin: 0; }
.se-leave-reasons .se-ropt__title { font-weight: 500; text-wrap: balance; }
.se-leave-reasons .se-ropt:has(input:checked) .se-ropt__title { color: #2c3fb1; font-weight: 600; }
.se-leave-reasons .se-ropt:has(input:focus-visible) { outline: 2px solid #366cf3; outline-offset: 2px; }

/* No reason chosen: the server error, or the one of the browser check (jquery-validate) */
.se-leave-error:empty { display: none; }

.se-leave-error,
.se-leave-error .invalid-feedback {
    margin: 10px 0 0;
    color: #b3213f;
    font-size: 13px;
    font-weight: 500;
}

.se-leave-fieldset.is-invalid .se-ropt { border-color: #f4c6d2; }

/* ── Actions: the safe one first, the destructive one next to it ── */
.se-leave-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.se-leave-actions .btn,
.se-leave-help .btn,
.se-leave-offer__cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    font-weight: 600;
}

/* A destructive action: an outline, never a big red button */
.btn.se-leave-danger,
.btn.se-leave-danger:visited {
    border: 1px solid #f4c6d2;
    background: #fff;
    color: #b3213f;
}

.btn.se-leave-danger:hover,
.btn.se-leave-danger:focus {
    border-color: #e99bb0;
    background: #fff8fa;
    color: #8f1832;
}

/* ── Save offers, in the plan grid language (pricing-grid pg-card: 14px radius, 2px border) ── */
.se-leave-offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px 20px;
    padding-top: 12px;
}

.se-leave-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px 22px 22px;
    border: 2px solid #e3e6f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 47, 69, .05);
}

.se-leave-offer--rec {
    border-color: #4a63e7;
    box-shadow: 0 18px 40px rgba(61, 85, 214, .16);
}

.se-leave-offer__badge {
    position: absolute;
    top: -14px;
    left: 20px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #4a63e7;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.se-leave-offer__name {
    margin: 0;
    color: #2a2f45;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.se-leave-offer__sub { margin: 2px 0 0; color: #646c9a; font-size: 13px; }

.se-leave-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 16px;
}

.se-leave-price__amount {
    color: #2a2f45;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.se-leave-price__unit { color: #646c9a; font-size: 15px; }
.se-leave-price__note { margin: 4px 0 0; color: #646c9a; font-size: 13px; }

.se-leave-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 22px;
    padding: 18px 0 0;
    border-top: 1px solid #ebedf2;
    list-style: none;
    color: #48465b;
    font-size: 13.5px;
    line-height: 1.5;
}

.se-leave-points li { display: flex; align-items: flex-start; gap: 10px; text-wrap: pretty; }
.se-leave-points svg { flex: 0 0 auto; margin-top: 2px; color: #07875f; }

.se-leave-offer__cta { margin-top: auto; }
.se-leave-offer__cta .btn { width: 100%; min-height: 48px; border-radius: 10px; font-size: 14px; }

/* A save offer that is a conversation, not a price (support and feedback variants) */
.se-leave-help { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.se-leave-help__note { color: #646c9a; font-size: 13px; }

.se-leave-field { display: flex; flex-direction: column; gap: 6px; }
.se-leave-field label { margin: 0; color: #282a3c; font-size: 14px; font-weight: 600; }
.se-leave-field__opt { margin-left: 4px; color: #646c9a; font-size: 12px; font-weight: 400; }
.se-leave-field textarea { min-height: 96px; resize: vertical; }
/* The error of a field (the confirmation word of the close form) sits right under its input */
.se-leave-field .se-leave-error { margin: 0; }

/* The decline form under the offers: what cancelling means on the left, the actions on the right */
.se-leave-decline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.se-leave-hint {
    flex: 1 1 320px;
    max-width: 520px;
    margin: 0;
    color: #646c9a;
    font-size: 13px;
    line-height: 1.55;
    text-wrap: pretty;
}

@media (max-width: 767.98px) {
    .kt-portlet.se-leave-shell > .kt-portlet__body,
    .kt-portlet.se-leave-shell > form > .kt-portlet__body { padding: 22px 18px 24px; }
    .kt-portlet.se-leave-shell .kt-portlet__foot { padding: 16px 18px; }
    .se-leave-title { font-size: 20px; }
    .se-leave-actions { flex: 1 1 100%; }
    .se-leave-actions > .btn,
    .se-leave-actions > a:not(.btn) { flex: 1 1 100%; }
    .se-leave-actions > a:not(.btn) { text-align: center; }
    .se-leave-offer { padding: 24px 18px 18px; }
    .se-leave-offer__name { font-size: 18px; }
    .se-leave-price__amount { font-size: 34px; }
}

/* ── One-message pages (dl-page > dl-head + dl-card dl-confirm): tones of the badge and the icon ── */
.dl-hero-badge.se-leave-badge--neutral { color: #3f4254; }
.dl-hero-badge.se-leave-badge--warn { color: #6b4500; }
.dl-confirm-icon.se-leave-icon--neutral { background: #f1f2f7; color: #3f4254; }
.dl-confirm-icon.se-leave-icon--ok { background: #e3f4ec; color: #0b6446; }
.dl-confirm-icon.se-leave-icon--warn { background: #fff4de; color: #8a5300; }

.se-leave-msg .dl-card-title,
.se-leave-msg .dl-title { text-wrap: balance; }
.se-leave-msg .dl-card-text,
.se-leave-msg .dl-note { text-wrap: pretty; }
.se-leave-msg .dl-card-foot { gap: 10px; }
.se-leave-msg .dl-btn { width: 100%; }

/* ── Payment in progress (payment/waiting): the one-message page of auth/verify-v2 ── */
.dl-hero-badge.se-pay-waiting-badge { color: #2c3fb1; }

/* A slow ring around a lock instead of the old loading gif */
.se-pay-waiting-ring {
    position: relative;
    display: inline-flex;
    width: 72px;
    height: 72px;
    color: #3d55d6;
}

.se-pay-waiting-ring__arc {
    animation: se-pay-waiting-spin 1.6s linear infinite;
    transform-origin: 50% 50%;
}

.se-pay-waiting-ring__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes se-pay-waiting-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .se-pay-waiting-ring__arc { animation-duration: 6s; }
}

.se-pay-waiting-next {
    margin: 0;
    color: #646c9a;
    font-size: 13.5px;
    line-height: 1.6;
}

/* The bank takes long: a callout under the message, then the page stops asking */
.se-pay-waiting .se-callout {
    flex-wrap: nowrap;
    align-self: stretch;
    margin-top: 0;
    text-align: left;
}

.se-pay-waiting.is-stopped .se-pay-waiting-ring__arc { animation: none; }

/* ── Payment received (payment/thank_you) ── */
.dl-confirm.se-pay-thanks { max-width: 620px; }

.dl-confirm-icon.se-pay-thanks__icon { background: #e3f7f0; color: #07875f; }

/* The purchase as key and value rows, left aligned in the centred card */
.se-kv.se-pay-thanks__kv {
    align-self: stretch;
    margin: 4px 0 0;
    padding: 16px 18px;
    border: 1px solid #ebedf2;
    border-radius: 12px;
    background: #f7f8fa;
    font-size: 14px;
    text-align: left;
}

.se-pay-thanks__kv .se-kv__row { border-top-color: #ebedf2; }
.se-pay-thanks__kv .se-kv__row:last-child { padding-bottom: 0; }
.se-pay-thanks__kv .se-kv__key { margin: 0; font-weight: 400; }
.se-pay-thanks__kv .se-kv__val { margin: 0; }
.se-pay-thanks__sub { display: block; color: #646c9a; font-size: 12.5px; font-weight: 400; }

/* The purchase has not arrived yet: what happens next, once the page stops asking for it */
.se-pay-thanks .se-callout {
    flex-wrap: nowrap;
    align-self: stretch;
    margin-top: 0;
    text-align: left;
}

.se-pay-thanks .dl-card-foot { gap: 12px; }
.se-pay-thanks__invoices { gap: 8px; }

/* ── OAuth consent and error pages (oauth/authorize, oauth/error): one centred portlet ── */
.se-oauth {
    max-width: 620px;
    margin: 10px auto 40px;
}

.kt-portlet.se-oauth__card { margin-bottom: 0; }

.se-oauth__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title.se-oauth__title { color: #2a2f45; font-weight: 600; }

.se-oauth__icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef1ff;
    color: #2c3fb1;
}

.se-oauth__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.se-oauth__who { display: flex; flex-direction: column; gap: 8px; }

.se-oauth__lead {
    margin: 0;
    color: #2a2f45;
    font-size: 15px;
    line-height: 1.6;
}

.se-oauth__email { overflow-wrap: anywhere; }

.se-oauth__site {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #646c9a;
    font-size: 13px;
}

.se-oauth__site svg { color: #8a8ea3; }
.se-oauth__site a,
.se-oauth__site strong { overflow-wrap: anywhere; }
/* Where the user is sent back: the one fact of the screen the client cannot make up */
.se-oauth__site strong { color: #2a2f45; font-weight: 600; }

.se-oauth__scopes { min-width: 0; margin: 0; padding: 0; border: 0; }

.se-oauth__legend {
    margin-bottom: 10px;
    padding: 0;
    color: #282a3c;
    font-size: 14px;
    font-weight: 600;
}

.se-oauth__optitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.se-callout.se-oauth__callout { margin-top: 0; }

/* Authorize comes first in the markup (the default button of the form): shown on the right */
.kt-portlet__foot.se-oauth__foot {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 12px;
}

.se-oauth__foot .btn,
.btn.se-oauth__cta {
    min-width: 110px;
    padding: 10px 20px;
    font-weight: 600;
}

/* The error page: a message card in the portlet */
.se-oauth__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 36px 40px;
    text-align: center;
}

.se-oauth__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fde7ee;
    color: #b3213f;
}

.se-oauth__error-title {
    margin: 0;
    color: #2a2f45;
    font-size: 24px;
    font-weight: 600;
}

.se-oauth__error .se-callout { align-self: stretch; text-align: left; }

.se-oauth__help {
    margin: 0;
    color: #595d6e;
    font-size: 14px;
    line-height: 1.6;
}

.se-oauth__detail {
    margin: -4px 0 0;
    color: #646c9a;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.btn.se-oauth__cta { align-self: stretch; padding: 12px 20px; }

@media (max-width: 575.98px) {
    .se-oauth { margin-top: 0; }
    .se-oauth__foot .btn { flex: 1 1 0; min-width: 0; }
    .se-oauth__error { padding: 28px 20px; }
}

/* The footer's columns have no right padding (custom20240619), so the row of links inside one
   stuck out by its -10px margin: every page scrolled 5px sideways on a phone */
.kt-footer .kt-footer__top .kt-footer__nav.row { margin-right: 0; }