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

/* 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) ──
   The summary first (backend/country/log-head, then the visit path), then one section per
   part of the launch: the results, and 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;
}

.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: 22px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

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

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

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

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

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

/* 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 the visit path 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: 19px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.se-path__step--link:focus-within { box-shadow: 0 0 0 3px rgba(93, 120, 255, .2); }

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

/* From the keyboard the focus ring (ui-refresh) goes around the whole step, which the link covers,
   instead of around its title */
.se-path__step--link:has(.se-path__link:focus-visible) { outline: 2px solid #366cf3; outline-offset: 2px; }
html body a.se-path__link:focus-visible { outline: 0 !important; box-shadow: none !important; }

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

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

.se-aio__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--se-aio-soft);
    border-radius: 11px 11px 0 0;
}

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

.se-aio .se-serp-row__rank {
    background: #eef1ff;
    color: #3f5bd9;
}

/* The card the visit came through: framed green like the clicked organic row */
.se-aio--clicked { border-color: var(--se-aio-success-line); }

.se-aio--clicked .se-aio__head {
    border-bottom-color: #d5f0e6;
    background: var(--se-aio-success-bg);
}

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

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

.se-aio__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #212529;
}

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

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

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

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

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

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

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

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

/* The answer on the line of the result titles */
@media (min-width: 768px) {
    .se-aio--ranked .se-aio__answer { padding-left: 62px; }
}

/* Phones: the rank narrows like the rows', the status goes under the title */
@media (max-width: 767.98px) {
    .se-aio__head {
        gap: 8px 12px;
        padding: 12px;
    }

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

    .se-aio__status { margin-left: 0; }

    .se-aio--ranked .se-aio__status { margin-left: 40px; }

    .se-aio .se-aio__answer,
    .se-aio .se-aio__sources { padding: 14px 12px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Search log: the results list (backend/country/log-google) ──
   One anatomy for every row: 16px padding, a 30px rank column, a 16px gap, 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, brand 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): its card is the frame, with the rank in the same
   column and the answer starting on the same line as the titles. */
.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-color: #c9d1ff;
    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: #f1f2f7;
    color: #3f4254;
    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 1.5px #5d78ff;
    color: #3f5bd9;
}

.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 #c9d1ff;
    background: #fff;
    color: #3f5bd9;
    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 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); }

.se-serp-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 16px 0;
    color: #6c7086;
    font-size: 12px;
}

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

/* ── Search log: the visit (backend/country/log-google) ──
   One line per page read on the site, 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 20px;
}

.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: 2px;
    min-width: 0;
    padding-top: 4px;
}

.se-visit__kicker {
    color: #6c7086;
    font-size: 12px;
    font-weight: 600;
}

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

.se-visit__url {
    font-size: 12px;
    overflow-wrap: anywhere;
}

a.se-visit__url { color: #3f5bd9; }

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

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

/* ── 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 #f4c6d2;
    border-radius: 10px;
    background: #fff8fa;
}

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

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

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

.se-novisit__text {
    max-width: 760px;
    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,
    .se-serp-foot {
        margin-right: 12px;
        margin-left: 12px;
    }

    .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-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 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

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