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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Campaign settings: read-only campaign type display ── */
.campaign-type-display {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid #ebedf2;
    border-radius: 8px;
    background: #f7f8fa;
    max-width: 480px;
}

.campaign-type-icon img {
    height: 34px;
    width: 34px;
    border-radius: 8px;
    display: block;
}

.campaign-type-icon .badge {
    font-size: 18px;
    padding: 8px;
}

.campaign-type-info {
    display: flex;
    flex-direction: column;
}

.campaign-type-title {
    font-size: 15px;
    font-weight: 600;
    color: #48465b;
}

.campaign-type-desc {
    font-size: 13px;
    color: #a2a5b9;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.se-notice { position: relative; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Searches history: the Position result ──
   "Not found", "Knowledge Panel" and "Local pack: 3" are single results, so they
   must never break across two lines. The column claims the width it needs; if the
   table then outgrows its container, .table-responsive scrolls it. */
.se-searches-table__position,
.se-searches-table__position .kt-badge,
.se-searches-table__position .kt-badge span {
    white-space: nowrap;
}
