/* ==========================================================================
   Fonts (self-hosted, no CDN): @font-face rules for 'Plus Jakarta Sans' are
   defined in assets/fonts/plus-jakarta-sans/plus-jakarta-sans.css, enqueued
   as the 'sot-fonts' dependency before this stylesheet - not duplicated here.
   ========================================================================== */

/* Reset and Base Styles */
#sot-serp-overlap-tool * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sot-serp-overlap-tool {
    /* Color tokens - defined once here, referenced everywhere below as
       var(--sot-*), instead of the ~15 raw hex values that used to be
       copy-pasted verbatim at 150+ call sites (and had drifted: e.g. two
       near-identical grays, #E2E8F0 and #333333, doing the same "border"
       job in different places for no reason other than which round of
       edits touched that rule). Scoped to this selector (not :root) so it
       can never leak into or collide with the host theme's own styles. */
    --sot-navy: #003C62;
    --sot-ink: #1E293B;
    --sot-ink-strong: #111111;
    --sot-muted: #64748B;
    --sot-neutral: #94A3B8;
    --sot-border: #E2E8F0;
    --sot-border-strong: #333333;
    --sot-bg: #FFFFFF;
    --sot-bg-soft: #F8FAFC;
    --sot-bg-softer: #F1F5F9;
    --sot-success: #0FC27E;
    --sot-warning-bg: #FFEA50;
    --sot-warning-text: #B45309;
    --sot-error: #DC2626;
    --sot-error-dark: #B91C1C;

    /* Type scale - 7 steps used consistently instead of the ~19 one-off
       font-size values (10px-70px) that had accumulated, one per component,
       with no shared rhythm between them. */
    --sot-text-xs: 12px;
    --sot-text-sm: 13px;
    --sot-text-base: 14px;
    --sot-text-md: 16px;
    --sot-text-lg: 18px;
    --sot-text-xl: 24px;
    --sot-text-2xl: 32px;

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* No background/min-height:100vh here on purpose: this renders as a
       compact widget inside an arbitrary host page (not its own standalone
       page anymore), so it must not paint a full-viewport-height colored
       backdrop behind itself - that left a large empty gradient block under
       the form on ordinary pages. The white cards below carry their own
       shadows/structure without needing a page-style background. */
    color: var(--sot-ink-strong);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#sot-serp-overlap-tool .sot-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

@media (max-width: 768px) {
    #sot-serp-overlap-tool .sot-container {
        padding: 0 16px;
    }
}

/* Layout with Sidebar */
#sot-serp-overlap-tool .sot-layout-with-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#sot-serp-overlap-tool .sot-sidebar {
    display: none; /* Hidden by default (mobile and tablet) */
}

/* Show sidebar only on very wide screens (1700px and above) */
@media (min-width: 1700px) {
    #sot-serp-overlap-tool .sot-layout-with-sidebar {
        display: grid;
        grid-template-columns: 1fr 260px; /* content left, sidebar right */
    }
    
    #sot-serp-overlap-tool .sot-sidebar {
        display: block; /* Show sidebar on very wide screens */
        position: sticky;
        top: 120px; /* below header */
        align-self: start;
        height: max-content;
        grid-column: 2; /* place on the right */
        width: auto;
        order: 0;
    }
}

#sot-serp-overlap-tool .sot-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 12px;
    margin-left: 0; /* keep aligned to sidebar edge */
}

#sot-serp-overlap-tool .sot-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sot-navy);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 0;
    transition: background 0.2s ease;
}

#sot-serp-overlap-tool .sot-sidebar-link:hover,
#sot-serp-overlap-tool .sot-sidebar-link.sot-active {
    background: rgba(0, 60, 98, 0.08);
}

#sot-serp-overlap-tool .sot-sidebar-link.sot-is-hidden {
    display: none;
}

#sot-serp-overlap-tool .sot-sidebar-link i {
    width: 18px;
    text-align: center;
}

/* Sidebar is hidden on mobile and tablet (max-width: 1024px) - no need for additional rules */

#sot-serp-overlap-tool {
    scroll-behavior: smooth;
}

/* Anchor offset to account for sticky header */
#sot-serp-overlap-tool #sot-features,
#sot-serp-overlap-tool #sot-analysisForm,
#sot-serp-overlap-tool #sot-resultsCard,
#sot-serp-overlap-tool #sot-urlComparison,
#sot-serp-overlap-tool #sot-guide,
#sot-serp-overlap-tool #sot-faq {
    scroll-margin-top: 180px; /* navigate a bit further down so the heading is lower */
}

/* Guide as plain text section */
#sot-serp-overlap-tool .sot-guide-section {
    margin-top: 24px;
    text-align: center;
}

#sot-serp-overlap-tool .sot-guide-section h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 50px;
    font-weight: 800;
    color: var(--sot-ink-strong);
    margin-bottom: 12px;
    justify-content: center;
}

#sot-serp-overlap-tool .sot-guide-subtitle {
    color: var(--sot-ink-strong);
    opacity: 0.8;
    margin-bottom: 16px;
}

#sot-serp-overlap-tool .sot-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 16px; /* more space between steps */
    align-items: center;
}

#sot-serp-overlap-tool .sot-guide-step {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 0 56px; /* more room between number and text */
    position: relative;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

#sot-serp-overlap-tool .sot-step-badge {
    position: absolute;
    left: 16px;
    top: 2px; /* align with heading baseline */
    width: 32px;
    height: 32px; /* slightly larger number chip */
    border-radius: 0;
    background: var(--sot-navy);
    color: var(--sot-bg);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

#sot-serp-overlap-tool .sot-guide-step h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--sot-ink-strong);
    margin: 0 0 8px 0; /* clearer separation to text */
}

#sot-serp-overlap-tool .sot-guide-step p {
    margin: 0 0 10px 0; /* a bit more breathing room */
}

#sot-serp-overlap-tool .sot-step-note {
    font-size: 13px;
    background: rgba(77, 236, 236, 0.12);
    border: 1px solid rgba(77, 236, 236, 0.35);
    color: var(--sot-ink-strong);
    padding: 8px 10px;
    border-radius: 0;
    margin-top: 2px; /* space after paragraph */
}
#sot-serp-overlap-tool .sot-step-content {
    display: flex;
    flex-direction: column;
}

#sot-serp-overlap-tool .sot-note-label {
    font-weight: 800;
    margin-right: 6px;
}

#sot-serp-overlap-tool .sot-thresholds {
    display: grid;
    gap: 8px;
}

#sot-serp-overlap-tool .sot-threshold {
    display: flex;
    gap: 8px;
    align-items: center;
}

#sot-serp-overlap-tool .sot-t-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 0;
    font-weight: 800;
    font-size: 12px;
}

#sot-serp-overlap-tool .sot-t-text { font-size: 13px; }

#sot-serp-overlap-tool .sot-t-high .sot-t-badge {
    background: var(--sot-success);
    color: var(--sot-bg);
}

#sot-serp-overlap-tool .sot-t-low .sot-t-badge {
    background: var(--sot-warning-bg);
    color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-info-list {
    margin-left: 16px;
    list-style: disc;
    display: inline-block;
    text-align: left;
}

/* FAQ section with item blocks */
#sot-serp-overlap-tool .sot-faq-section {
    margin-top: 24px;
    text-align: center;
}

#sot-serp-overlap-tool .sot-faq-section h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 50px;
    font-weight: 800;
    color: var(--sot-ink-strong);
    margin-bottom: 12px;
    justify-content: center;
}

#sot-serp-overlap-tool .sot-faq-item {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 16px 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

#sot-serp-overlap-tool .sot-faq-item + .sot-faq-item {
    margin-top: 12px;
}

#sot-serp-overlap-tool .sot-faq-item h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Desktop: make sidebar fixed so it follows on scroll */
@media (min-width: 1700px) {
    #sot-serp-overlap-tool .sot-sidebar {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        right: 24px; /* offset slightly from viewport edge */
        width: 220px; /* slimmer to avoid overlap */
        z-index: 90;
    }
    #sot-serp-overlap-tool .sot-layout-with-sidebar {
        grid-template-columns: 1fr; /* content spans full container grid; sidebar overlays */
        padding-right: 0; /* keep content centered; sidebar floats outside container */
    }
}

/* On very wide screens, align sidebar just outside the centered container */
@media (min-width: 1700px) {
    #sot-serp-overlap-tool .sot-sidebar {
        right: 24px; /* consistent offset on ultra-wide */
    }
    #sot-serp-overlap-tool .sot-layout-with-sidebar {
        padding-right: 0; /* content remains centered */
    }
}

/* Header */
#sot-serp-overlap-tool .sot-header {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--sot-navy);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 60, 98, 0.3);
    overflow: visible;
}

/* Subheader under the header */
#sot-serp-overlap-tool .sot-subheader {
    background: rgba(77, 236, 236, 0.10);
    border-bottom: 1px solid rgba(77, 236, 236, 0.25);
}

#sot-serp-overlap-tool .sot-subheader .sot-container {
    padding: 14px 30px;
}

#sot-serp-overlap-tool .sot-subheader p {
    color: var(--sot-ink-strong);
    opacity: 0.9;
    font-size: 14px;
}

#sot-serp-overlap-tool .sot-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    padding: 20px 0;
    overflow: visible;
    position: relative;
}

#sot-serp-overlap-tool .sot-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-left: -200px;
    flex-shrink: 0;
}

#sot-serp-overlap-tool .sot-logo:hover {
    opacity: 0.8;
}

#sot-serp-overlap-tool .sot-claneo-logo {
    height: 150px;
    width: auto;
    max-width: 350px;
    object-fit: contain;
}

#sot-serp-overlap-tool .sot-header-info {
    display: flex;
    gap: 24px;
}

#sot-serp-overlap-tool .sot-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sot-border);
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 12px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Main Content */
#sot-serp-overlap-tool .sot-main {
    padding: 32px 0;
}

/* Increase vertical spacing between main sections */
#sot-serp-overlap-tool .sot-main .sot-container > section {
    margin-bottom: 72px;
}

/* Extra spacing after dynamic analysis content block */
#sot-serp-overlap-tool .sot-content {
    margin-bottom: 72px;
}

/* Hero Section */
#sot-serp-overlap-tool .sot-hero {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 48px;
}

#sot-serp-overlap-tool .sot-hero-logo {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
    margin: 0 auto 24px;
}

#sot-serp-overlap-tool .sot-hero h2 {
    font-size: 70px;
    font-weight: 900;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--sot-ink) 0%, var(--sot-navy) 50%, var(--sot-navy) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

#sot-serp-overlap-tool .sot-hero p {
    font-size: 20px;
    color: var(--sot-muted);
    max-width: 800px;
    margin: 0 auto;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Features */
#sot-serp-overlap-tool .sot-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 20px;
    margin-bottom: 48px;
}

#sot-serp-overlap-tool .sot-features-heading {
    font-size: 50px;
    font-weight: 800;
    color: var(--sot-ink-strong);
    margin: 24px 0 16px 0;
    text-align: center;
    grid-column: 1 / -1; /* span across all columns when inside grid */
}

#sot-serp-overlap-tool .sot-feature-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 40px; /* larger block padding */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    min-height: 220px; /* give cards more presence */
}

#sot-serp-overlap-tool .sot-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-feature-icon {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    padding: 20px; /* bigger icon container */
    border-radius: 0;
    width: fit-content;
    margin-bottom: 20px;
    box-shadow: 0 8px 16px rgba(0, 60, 98, 0.2);
}

#sot-serp-overlap-tool .sot-feature-icon i {
    font-size: 32px; /* larger icon */
    color: white;
}

#sot-serp-overlap-tool .sot-feature-card h3 {
    font-size: 24px; /* slightly larger title */
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--sot-ink-strong);
    letter-spacing: -0.02em;
}

#sot-serp-overlap-tool .sot-feature-card p {
    color: var(--sot-muted);
    font-size: 17px; /* slightly larger description */
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Content Layout */
#sot-serp-overlap-tool .sot-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
    margin-top: -45px; /* pull analysis form slightly upward */
}

/* Form Card */
#sot-serp-overlap-tool .sot-form-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

#sot-serp-overlap-tool .sot-form-card h3 {
    display: block;
    margin-bottom: 24px;
}

#sot-serp-overlap-tool .sot-form-card form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
}

#sot-serp-overlap-tool .sot-form-card .sot-form-group {
    margin-bottom: 0;
    min-width: auto;
}

/* Remove duplicate h3 styles since we hide the title */

/* Remove h3 icon styles since we hide the title */

/* Form Styles */
#sot-serp-overlap-tool .sot-form-group {
    margin-bottom: 32px;
}

/* Settings row - horizontal layout */
#sot-serp-overlap-tool .sot-settings-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#sot-serp-overlap-tool .sot-settings-row .sot-form-group {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

/* Keywords horizontal layout */
#sot-serp-overlap-tool .sot-keywords-group {
    margin-top: 0;
}

#sot-serp-overlap-tool #sot-keywordsContainer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#sot-serp-overlap-tool .sot-keyword-input {
    flex: 1;
    min-width: 200px;
}

/* Responsive design for settings row */
@media (max-width: 1024px) {
    #sot-serp-overlap-tool .sot-settings-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    #sot-serp-overlap-tool .sot-header-content {
        height: 100px;
        padding: 15px 0;
    }
    
    #sot-serp-overlap-tool .sot-logo {
        margin-left: -100px;
    }
    
    #sot-serp-overlap-tool .sot-claneo-logo {
        height: 120px;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    /* The 1024px breakpoint above switches this to display:grid, so
       flex-direction here has no effect on its own (it's not a flex
       container anymore) - override grid-template-columns instead, or this
       silently stays a 2-column grid all the way down to phone widths. */
    #sot-serp-overlap-tool .sot-settings-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    #sot-serp-overlap-tool .sot-settings-row .sot-form-group {
        min-width: auto;
    }
    
    #sot-serp-overlap-tool .sot-header-content {
        height: 80px;
        padding: 12px 0;
        justify-content: flex-start;
        min-height: 80px;
    }
    
    #sot-serp-overlap-tool .sot-logo {
        margin-left: 0;
        justify-content: flex-start;
    }
    
    #sot-serp-overlap-tool .sot-claneo-logo {
        height: 70px;
        max-width: 200px;
        max-height: 70px;
    }
    
    /* Disable hover effects on mobile/tablet */
    #sot-serp-overlap-tool .sot-keyword-row:hover {
        transform: none !important;
    }
    
    #sot-serp-overlap-tool .sot-keyword-row.sot-common-url-2:hover {
        background: rgba(0, 60, 98, 0.1) !important;
        box-shadow: none !important;
    }
    
    #sot-serp-overlap-tool .sot-keyword-row.sot-common-url-3:hover {
        background: rgba(220, 38, 38, 0.1) !important;
        box-shadow: none !important;
    }
    
    #sot-serp-overlap-tool .sot-common-urls-card:hover {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    }
    
    #sot-serp-overlap-tool .sot-pair-item:hover {
        transform: none !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        border-color: var(--sot-border) !important;
    }
    
    #sot-serp-overlap-tool .sot-url-tables-container.sot-url-hover-blur .sot-keyword-row:not(.sot-url-hover-highlight) {
        filter: none !important;
        opacity: 1 !important;
    }
    
    #sot-serp-overlap-tool .sot-keyword-row.sot-url-hover-highlight {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
    
    #sot-serp-overlap-tool #sot-keywordsContainer {
        flex-direction: column;
        gap: 12px;
    }
    
    #sot-serp-overlap-tool .sot-keyword-input {
        min-width: auto;
    }
}

#sot-serp-overlap-tool .sot-form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 12px;
    color: #374151;
    font-size: 16px;
    letter-spacing: -0.01em;
}

#sot-serp-overlap-tool .sot-form-group input,
#sot-serp-overlap-tool .sot-form-group select {
    width: 100%;
    padding: 16px 20px;
    background: var(--sot-bg-soft);
    border: 2px solid var(--sot-border);
    border-radius: 0;
    color: var(--sot-ink);
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Verschiebe Dropdown-Pfeil in den Einstellungen nach links */
#sot-serp-overlap-tool .sot-settings-row .sot-form-group select {
    padding-right: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

#sot-serp-overlap-tool .sot-form-group input:focus,
#sot-serp-overlap-tool .sot-form-group select:focus {
    outline: none;
    border-color: var(--sot-navy);
    box-shadow: 0 0 0 4px rgba(0, 60, 98, 0.1);
    background: white;
}

/* Custom Select Styles */
#sot-serp-overlap-tool .sot-custom-select-wrapper {
    position: relative;
    width: 100%;
}

#sot-serp-overlap-tool .sot-custom-select-display {
    width: 100%;
    padding: 16px 20px;
    background: var(--sot-bg-soft);
    border: 2px solid var(--sot-border);
    border-radius: 0;
    color: var(--sot-ink);
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    padding-right: 40px;
    position: relative;
}

#sot-serp-overlap-tool .sot-custom-select-display::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#sot-serp-overlap-tool .sot-custom-select-display:hover {
    border-color: var(--sot-navy);
    background: white;
}

/* Now keyboard-focusable (tabindex="0", see serp-overlap-tool.js) - matches the
   focus ring used on the plain text/select inputs elsewhere in this form. */
#sot-serp-overlap-tool .sot-custom-select-display:focus {
    outline: none;
    border-color: var(--sot-navy);
    box-shadow: 0 0 0 4px rgba(0, 60, 98, 0.1);
    background: white;
}

#sot-serp-overlap-tool .sot-custom-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--sot-border);
    border-top: none;
    border-radius: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: -2px;
    max-height: 400px;
    flex-direction: column;
}

#sot-serp-overlap-tool .sot-custom-select-dropdown[style*="display: flex"] {
    display: flex !important;
}

#sot-serp-overlap-tool .sot-custom-select-search {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--sot-border);
    font-size: 14px;
    color: var(--sot-ink);
    background: var(--sot-bg-soft);
    width: 100%;
    box-sizing: border-box;
}

#sot-serp-overlap-tool .sot-custom-select-search:focus {
    outline: none;
    background: white;
    border-bottom-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-custom-select-options {
    max-height: 300px;
    overflow-y: auto;
}

#sot-serp-overlap-tool .sot-custom-select-option {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--sot-ink);
    font-size: 16px;
    font-weight: 500;
}

#sot-serp-overlap-tool .sot-custom-select-option:hover {
    background-color: var(--sot-bg-soft);
    color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-custom-select-separator {
    padding: 8px 20px;
    color: var(--sot-neutral);
    font-size: 12px;
    cursor: default;
    background-color: var(--sot-bg-soft);
    border-top: 1px solid var(--sot-border);
    border-bottom: 1px solid var(--sot-border);
}

/* Inline error shown next to a location/language select when the REST
   /locations or /languages request fails to load (no equivalent in the
   original app, which had these lists hardcoded client-side). */
#sot-serp-overlap-tool .sot-select-error {
    color: var(--sot-error);
    font-size: 13px;
    margin-top: 6px;
}

/* Wrapper for the optional Cloudflare Turnstile widget, only rendered when
   an admin has enabled it in the plugin settings. */
#sot-serp-overlap-tool .sot-turnstile-container {
    margin: 16px 0;
}

#sot-serp-overlap-tool .sot-form-group input::placeholder {
    color: var(--sot-neutral);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Keywords Input */
#sot-serp-overlap-tool .sot-keyword-input {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

#sot-serp-overlap-tool .sot-keyword-input input {
    flex: 1;
}

#sot-serp-overlap-tool .sot-remove-keyword {
    background: var(--sot-error-dark);
    border: none;
    color: white;
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(185, 28, 28, 0.4);
}

#sot-serp-overlap-tool .sot-remove-keyword:hover {
    background: #991b1b;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(153, 27, 27, 0.5);
}

#sot-serp-overlap-tool .sot-add-keyword-btn {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 10px 14px;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 60, 98, 0.3);
    letter-spacing: 0.01em;
}

#sot-serp-overlap-tool .sot-add-keyword-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 60, 98, 0.4);
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
}

/* Submit Button */
#sot-serp-overlap-tool .sot-submit-btn {
    width: auto;
    max-width: 350px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    border: none;
    color: white;
    padding: 16px 28px;
    border-radius: 0;
    font-size: 17px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(0, 60, 98, 0.3);
    text-transform: none;
    letter-spacing: 0.01em;
}

#sot-serp-overlap-tool .sot-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 60, 98, 0.4);
    background: linear-gradient(135deg, var(--sot-navy) 0%, #0a4a6b 100%);
}

#sot-serp-overlap-tool .sot-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 8px rgba(0, 60, 98, 0.2);
}

#sot-serp-overlap-tool .sot-quota-info {
    text-align: center;
    margin-top: 12px;
    font-size: var(--sot-text-sm);
    color: var(--sot-muted);
}

#sot-serp-overlap-tool .sot-quota-info.sot-quota-low {
    color: var(--sot-error);
    font-weight: 600;
}

/* Results Card */
#sot-serp-overlap-tool .sot-results-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

#sot-serp-overlap-tool .sot-results-header {
    padding: 32px;
    border-bottom: 1px solid var(--sot-border);
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
}

#sot-serp-overlap-tool .sot-results-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

#sot-serp-overlap-tool .sot-results-header h3 {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--sot-ink-strong);
    letter-spacing: -0.025em;
}

#sot-serp-overlap-tool .sot-results-header h3 i {
    color: var(--sot-navy);
    background: rgba(0, 60, 98, 0.1);
    padding: 12px;
    border-radius: 0;
}

#sot-serp-overlap-tool .sot-results-header p {
    color: var(--sot-muted);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#sot-serp-overlap-tool .sot-export-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

#sot-serp-overlap-tool .sot-export-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#sot-serp-overlap-tool .sot-export-excel-btn {
    background: linear-gradient(135deg, var(--sot-success) 0%, #0aa86a 100%);
    color: white;
}

#sot-serp-overlap-tool .sot-export-excel-btn:hover {
    background: linear-gradient(135deg, #0aa86a 0%, #088d5a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 194, 126, 0.3);
}

#sot-serp-overlap-tool .sot-export-csv-btn {
    background: linear-gradient(135deg, #2DB5B5 0%, #1DA5A5 100%);
    color: white;
}

#sot-serp-overlap-tool .sot-export-csv-btn:hover {
    background: linear-gradient(135deg, #1DA5A5 0%, #0D9595 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 181, 181, 0.3);
}

#sot-serp-overlap-tool .sot-export-pdf-btn {
    background: linear-gradient(135deg, #EF4444 0%, var(--sot-error) 100%);
    color: white;
}

#sot-serp-overlap-tool .sot-export-pdf-btn:hover {
    background: linear-gradient(135deg, var(--sot-error) 0%, var(--sot-error-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

#sot-serp-overlap-tool .sot-export-pdf-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#sot-serp-overlap-tool .sot-export-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    #sot-serp-overlap-tool .sot-results-header-top {
        flex-direction: column;
        align-items: stretch;
    }

    #sot-serp-overlap-tool .sot-export-buttons {
        flex-direction: column;
        width: 100%;
    }

    #sot-serp-overlap-tool .sot-export-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Tabs */
#sot-serp-overlap-tool .sot-tabs {
    display: flex;
    border-bottom: 1px solid var(--sot-border);
    background: var(--sot-bg-soft);
}

#sot-serp-overlap-tool .sot-tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--sot-muted);
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
    letter-spacing: -0.01em;
}

#sot-serp-overlap-tool .sot-tab-btn:hover {
    color: var(--sot-navy);
    background: rgba(29, 78, 216, 0.05);
}

#sot-serp-overlap-tool .sot-tab-btn.sot-active {
    color: var(--sot-navy);
    border-bottom-color: var(--sot-navy);
    background: white;
}

/* Results Content */
#sot-serp-overlap-tool .sot-results-content {
    padding: 32px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Summary Cards */
#sot-serp-overlap-tool .sot-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

#sot-serp-overlap-tool .sot-summary-card {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#sot-serp-overlap-tool .sot-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sot-serp-overlap-tool .sot-card-label {
    font-size: 14px;
    color: var(--sot-muted);
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sot-serp-overlap-tool .sot-card-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--sot-ink);
    line-height: 1;
    letter-spacing: -0.02em;
}

#sot-serp-overlap-tool .sot-card-icon {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    padding: 12px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 60, 98, 0.2);
}

#sot-serp-overlap-tool .sot-card-icon i {
    color: white;
    font-size: 24px;
}

/* Search Volume Container */
#sot-serp-overlap-tool .sot-search-volume-container {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 32px;
}

#sot-serp-overlap-tool .sot-search-volume-container h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--sot-ink);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

#sot-serp-overlap-tool .sot-search-volume-container h4 i {
    color: var(--sot-navy);
    background: rgba(0, 60, 98, 0.1);
    padding: 8px;
    border-radius: 0;
}

#sot-serp-overlap-tool .sot-search-volume-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

#sot-serp-overlap-tool .sot-search-volume-card {
    background: white;
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
}

#sot-serp-overlap-tool .sot-search-volume-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-search-volume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sot-border);
}

#sot-serp-overlap-tool .sot-search-volume-header h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sot-ink);
    margin: 0;
}

#sot-serp-overlap-tool .sot-search-volume-badge {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 3px 6px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
}

#sot-serp-overlap-tool .sot-search-volume-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#sot-serp-overlap-tool .sot-volume-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--sot-ink);
    line-height: 1;
}

#sot-serp-overlap-tool .sot-volume-label {
    font-size: 14px;
    color: var(--sot-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Overlap Score and Recommendation Container */
#sot-serp-overlap-tool .sot-overlap-recommendation-container {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    align-items: stretch; /* the 3 cards should match the tallest one's height, not each hug their own content */
}

/* Overlap Score Visualization - a single ampel-colored bar (green/yellow/red
   by the same 70/40 thresholds as the recommendation card next to it), not a
   circle: the circle used to always render cyan regardless of the actual
   score, contradicting the correctly-colored recommendation card beside it -
   one number, two disagreeing color systems. A bar also matches the angular
   (border-radius: 0), un-rounded direction used throughout the rest of the
   tool, and reuses the same component already used for each pair's score in
   the "Detaillierte Overlap Analyse" list below (see .sot-overlap-bar). */
#sot-serp-overlap-tool .sot-overlap-score-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 36px 40px;
    background: linear-gradient(135deg, var(--sot-bg) 0%, var(--sot-bg-soft) 100%);
    border-radius: 0;
    border: 1px solid var(--sot-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    flex: 1;
}

#sot-serp-overlap-tool .sot-score-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

#sot-serp-overlap-tool .sot-score-value {
    font-size: 42px;
    font-weight: 900;
    color: var(--sot-muted);
    line-height: 1;
}

#sot-serp-overlap-tool .sot-score-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--sot-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#sot-serp-overlap-tool .sot-score-bar-container {
    background: var(--sot-bg-softer);
    border: 1px solid var(--sot-border);
    height: 18px;
    border-radius: 0;
    overflow: hidden;
}

#sot-serp-overlap-tool .sot-score-bar {
    height: 100%;
    width: 0;
    background: var(--sot-neutral);
    transition: width 0.5s ease;
}

#sot-serp-overlap-tool .sot-score-core {
    font-size: 13px;
    color: var(--sot-muted);
    margin: 0;
}

#sot-serp-overlap-tool .sot-overlap-score-container.sot-success .sot-score-value { color: var(--sot-success); }
#sot-serp-overlap-tool .sot-overlap-score-container.sot-success .sot-score-bar { background: var(--sot-success); }

#sot-serp-overlap-tool .sot-overlap-score-container.sot-warning .sot-score-value { color: var(--sot-warning-text); }
#sot-serp-overlap-tool .sot-overlap-score-container.sot-warning .sot-score-bar { background: var(--sot-warning-bg); }

#sot-serp-overlap-tool .sot-overlap-score-container.sot-error .sot-score-value { color: var(--sot-error); }
#sot-serp-overlap-tool .sot-overlap-score-container.sot-error .sot-score-bar { background: linear-gradient(135deg, var(--sot-error) 0%, var(--sot-error-dark) 100%); }

/* Recommendation Card */
#sot-serp-overlap-tool .sot-recommendation-card {
    background: linear-gradient(135deg, var(--sot-bg) 0%, var(--sot-bg-soft) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 300px;
    transition: all 0.3s ease;
}

#sot-serp-overlap-tool .sot-recommendation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-success {
    border-color: var(--sot-success);
    background: var(--sot-bg);
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-warning {
    border-color: var(--sot-warning-bg);
    background: var(--sot-bg);
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-info {
    border-color: var(--sot-navy);
    background: var(--sot-bg);
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-error {
    border-color: var(--sot-error);
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

#sot-serp-overlap-tool .sot-recommendation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 0;
    margin-bottom: 8px;
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-success .sot-recommendation-icon {
    background: var(--sot-success);
    color: var(--sot-bg);
    box-shadow: none;
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-warning .sot-recommendation-icon {
    background: var(--sot-warning-bg);
    color: var(--sot-navy);
    box-shadow: none;
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-info .sot-recommendation-icon {
    background: var(--sot-navy);
    color: var(--sot-bg);
    box-shadow: none;
}

#sot-serp-overlap-tool .sot-recommendation-card.sot-error .sot-recommendation-icon {
    background: linear-gradient(135deg, var(--sot-error) 0%, var(--sot-error-dark) 100%);
    color: white;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.3);
}

#sot-serp-overlap-tool .sot-recommendation-icon i {
    font-size: 24px;
}

#sot-serp-overlap-tool .sot-recommendation-content h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--sot-ink-strong);
    letter-spacing: -0.02em;
}

#sot-serp-overlap-tool .sot-recommendation-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sot-muted);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Common URLs Card */
#sot-serp-overlap-tool .sot-common-urls-card {
    background: linear-gradient(135deg, var(--sot-bg) 0%, var(--sot-bg-soft) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 300px;
    transition: all 0.3s ease;
}

#sot-serp-overlap-tool .sot-common-urls-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

#sot-serp-overlap-tool .sot-common-urls-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 0;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    color: white;
    box-shadow: 0 8px 16px rgba(0, 60, 98, 0.3);
}

#sot-serp-overlap-tool .sot-common-urls-icon i {
    font-size: 24px;
}

#sot-serp-overlap-tool .sot-common-urls-content h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--sot-ink);
    letter-spacing: -0.02em;
}

#sot-serp-overlap-tool .sot-common-urls-number {
    font-size: 48px;
    font-weight: 900;
    color: var(--sot-navy);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

#sot-serp-overlap-tool .sot-common-urls-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sot-muted);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* URL Comparison Container */
#sot-serp-overlap-tool .sot-url-comparison-container {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* No max-width here on purpose: this block should span the same width as
       its sibling sections (.sot-overlap-recommendation-container etc.), which
       have none either. A previous attempt capped this at 1200px to stop the
       (then too-narrow, max-width:400px) cards from looking like small islands
       in a lot of empty space - but on a host page whose content column is
       wider than 1200px, that cap instead made this ONE section look squeezed
       and narrower than everything around it. The actual fix for "cards too
       small on wide screens" is the per-card max-width below - this container
       just needs to match its siblings' natural width. */
    margin: 24px 0;
}

/* URL Legend */
#sot-serp-overlap-tool .sot-url-legend {
    background: white;
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#sot-serp-overlap-tool .sot-url-legend h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--sot-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

#sot-serp-overlap-tool .sot-url-legend h5 i {
    color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-legend-items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

#sot-serp-overlap-tool .sot-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

#sot-serp-overlap-tool .sot-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 0;
    flex-shrink: 0;
}

#sot-serp-overlap-tool .sot-legend-color.sot-blue {
    background: rgba(0, 60, 98, 0.1);
    border: 1px solid var(--sot-navy);
}

#sot-serp-overlap-tool .sot-legend-color.sot-red {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid var(--sot-error);
}

#sot-serp-overlap-tool .sot-legend-item span {
    font-size: 14px;
    color: var(--sot-muted);
    font-weight: 500;
}

/* Legend Controls */
#sot-serp-overlap-tool .sot-legend-controls {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--sot-border);
    margin-top: 16px;
}

#sot-serp-overlap-tool .sot-legend-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

#sot-serp-overlap-tool .sot-legend-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-toggle-label {
    user-select: none;
}

/* Hidden Markings */
#sot-serp-overlap-tool .sot-keyword-row.sot-markings-hidden {
    background: transparent !important;
    border-left: none !important;
}

#sot-serp-overlap-tool .sot-keyword-row.sot-markings-hidden.sot-common-url-2 {
    background: transparent !important;
    border-left: none !important;
}

#sot-serp-overlap-tool .sot-keyword-row.sot-markings-hidden.sot-common-url-3 {
    background: transparent !important;
    border-left: none !important;
}

/* Specific Color Markings */
#sot-serp-overlap-tool .sot-keyword-row.sot-blue-markings-hidden {
    background: transparent !important;
    border-left: none !important;
}

#sot-serp-overlap-tool .sot-keyword-row.sot-red-markings-hidden {
    background: transparent !important;
    border-left: none !important;
}

#sot-serp-overlap-tool .sot-url-comparison-container h4 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 32px;
    color: var(--sot-ink);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 16px;
}

#sot-serp-overlap-tool .sot-url-comparison-container h4 i {
    color: var(--sot-navy);
    background: rgba(0, 60, 98, 0.1);
    padding: 12px;
    border-radius: 0;
    font-size: 20px;
}

#sot-serp-overlap-tool .sot-results-export-buttons-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--sot-border);
}

/* Analysis Container */
#sot-serp-overlap-tool .sot-analysis-container {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#sot-serp-overlap-tool .sot-analysis-container h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--sot-ink);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

#sot-serp-overlap-tool .sot-analysis-container h4 i {
    color: var(--sot-navy);
    background: rgba(0, 60, 98, 0.1);
    padding: 8px;
    border-radius: 0;
}

/* SERP Container removed - no longer needed */

/* Error Message Styles */
#sot-serp-overlap-tool .sot-error-message {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 0;
    padding: 12px 16px;
    margin: 16px 0;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.1);
    animation: sot-slideIn 0.3s ease-out;
}

#sot-serp-overlap-tool .sot-error-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sot-error);
    font-weight: 600;
}

#sot-serp-overlap-tool .sot-error-content i {
    font-size: 18px;
    color: var(--sot-error);
}

@keyframes sot-slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Remove duplicate h4 styles */

/* URL Tables Container */
#sot-serp-overlap-tool .sot-url-tables-container {
    display: flex;
    gap: 40px;
    overflow-x: visible;
    padding: 24px 0;
    justify-content: center;
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
}

#sot-serp-overlap-tool .sot-connection-line {
    position: absolute;
    height: 2px;
    background: var(--sot-navy);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

#sot-serp-overlap-tool .sot-keyword-table-container {
    flex: 1;
    /* Was capped at 400px regardless of available space, so with only 2-3
       keywords the cards stayed small and looked centered in a lot of empty
       space on wide viewports. Raised so cards actually grow to fill the row -
       this cap (not a container-level one, see .sot-url-comparison-container)
       is what should keep cards from becoming excessively wide. */
    max-width: 560px;
    width: calc(33.333% - 11px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#sot-serp-overlap-tool .sot-keyword-table-header {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    color: white;
    padding: 12px;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

/* !important here on purpose: this plugin renders inside an unknown host
   theme, and themes/page builders commonly apply their own heading color
   (sometimes via an inline style, which beats a plain external rule) - this
   dark header MUST stay white-on-navy for readability regardless. */
#sot-serp-overlap-tool .sot-keyword-table-header,
#sot-serp-overlap-tool .sot-keyword-table-header h5,
#sot-serp-overlap-tool .sot-keyword-table-header * {
    color: var(--sot-bg) !important;
}

#sot-serp-overlap-tool .sot-ai-overview-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 12px;
    background: transparent;
    border-radius: 0;
    margin: 0 0 12px 0;
    position: relative;
    top: -5px;
}

#sot-serp-overlap-tool .sot-ai-overview-section i {
    font-size: 18px;
}

#sot-serp-overlap-tool .sot-search-volume-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 12px;
    background: transparent;
    border-radius: 0;
    margin: 0 0 12px 0;
    position: relative;
    top: -15px;
}

#sot-serp-overlap-tool .sot-search-volume-section .sot-search-volume-badge {
    color: var(--sot-ink);
    font-weight: 600;
    font-size: 16px;
}

/* SERP Features under Search Volume */
#sot-serp-overlap-tool .sot-serp-features-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start; /* start chips at the same top within the block */
    padding: 0 12px;
    min-height: 32px;
    margin: 0 0 12px 0;
    position: relative;
    top: -25px;
}

#sot-serp-overlap-tool .sot-serp-features-label {
    font-size: 14px;
    color: var(--sot-navy);
    font-weight: 700;
}

#sot-serp-overlap-tool .sot-serp-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    align-content: flex-start; /* pack multiple rows from the top */
    width: 100%;
    overflow: visible; /* Erlaube Überlappung der Anzahl-Badges */
}

#sot-serp-overlap-tool .sot-serp-row-break {
    flex-basis: 100%;
    height: 0;
}

#sot-serp-overlap-tool .sot-serp-features-section.sot-empty {
    min-height: 32px; /* reserve space so table doesn't shift */
}

#sot-serp-overlap-tool .sot-serp-feature-badge {
    background: #eef2ff;
    color: var(--sot-ink);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 0 8px; /* horizontal only to keep constant height */
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px; /* equal chip height */
    line-height: 34px;
    white-space: nowrap;
    overflow: visible; /* Erlaube Überlappung für Anzahl-Badge */
    text-overflow: ellipsis;
    position: relative;
}

#sot-serp-overlap-tool .sot-serp-feature-badge .bi {
    font-size: 17px;
    flex-shrink: 0;
}

#sot-serp-overlap-tool .sot-serp-feature-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--sot-navy);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#sot-serp-overlap-tool .sot-serp-feature-badge.sot-empty-slot {
    visibility: hidden; /* reserve space without rendering content */
}

#sot-serp-overlap-tool .sot-keyword-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; /* claim the remaining header width (next to the "N URLs" badge)... */
    min-width: 0; /* ...so min-width:0 shrinks it to that, not to its content's min-content size - without flex:1 this collapses to ~0 width and the title wraps one word per line */
}

#sot-serp-overlap-tool .sot-keyword-table-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

#sot-serp-overlap-tool .sot-keyword-stats {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

#sot-serp-overlap-tool .sot-top10-label {
    font-size: 15px;
    color: var(--sot-navy);
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    top: -35px;
    padding: 0 12px;
}

#sot-serp-overlap-tool .sot-keyword-table-content {
    padding: 0;
    background: white;
    border-radius: 0;
    border: 1px solid var(--sot-border-strong);
    margin-bottom: 16px;
    position: relative;
    top: -35px;
    overflow: hidden;
}

#sot-serp-overlap-tool .sot-keyword-row {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sot-border-strong);
    transition: all 0.3s ease;
    align-items: center;
    min-height: 68px; /* min- not fixed height: 2-line URLs (see .sot-url-text) must be able to grow the row instead of clipping/overlapping */
}

#sot-serp-overlap-tool .sot-keyword-row[style*="background"] {
    border-bottom: 1px solid var(--sot-border-strong);
}

#sot-serp-overlap-tool .sot-keyword-row[style*="background"] + .sot-keyword-row[style*="background"] {
    border-top: 1px solid var(--sot-border-strong);
    margin-top: -1px;
}

#sot-serp-overlap-tool .sot-keyword-row:last-child {
    border-bottom: none;
}

#sot-serp-overlap-tool .sot-keyword-row:hover {
    transform: scale(1.02);
    transform-origin: center;
    z-index: 5;
    position: relative;
}

#sot-serp-overlap-tool .sot-keyword-row[style*="background"]:hover {
    /* Keep the background color from inline style on hover */
    background: inherit !important;
}

#sot-serp-overlap-tool .sot-keyword-row.sot-common-url-2 {
    background: rgba(0, 60, 98, 0.1);
    color: var(--sot-ink);
}

#sot-serp-overlap-tool .sot-keyword-row.sot-common-url-2:hover {
    background: rgba(0, 60, 98, 0.2);
    box-shadow: 0 2px 8px rgba(0, 60, 98, 0.2);
}

#sot-serp-overlap-tool .sot-keyword-row.sot-common-url-3 {
    background: rgba(220, 38, 38, 0.1);
    color: var(--sot-ink);
}

#sot-serp-overlap-tool .sot-keyword-row.sot-common-url-3:hover {
    background: rgba(220, 38, 38, 0.2);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

#sot-serp-overlap-tool .sot-url-tables-container.sot-url-hover-blur .sot-keyword-row:not(.sot-url-hover-highlight) {
    filter: blur(2px);
    opacity: 0.6;
    transition: all 0.2s ease;
}

#sot-serp-overlap-tool .sot-keyword-row.sot-url-hover-highlight {
    transform: scale(1.03);
    transform-origin: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(0, 60, 98, 0.7);
    z-index: 10;
    position: relative;
    transition: all 0.2s ease;
    filter: brightness(1.05);
    border-bottom: none !important;
}

#sot-serp-overlap-tool .sot-keyword-position {
    width: 40px;
    flex-shrink: 0;
    text-align: center;
    font-weight: 700;
    color: #000000 !important;
    font-size: 15px;
    border-radius: 0;
    padding: 8px 4px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sot-serp-overlap-tool .sot-keyword-url {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0;
    justify-content: center;
    min-width: 0;
}

#sot-serp-overlap-tool .sot-keyword-url.sot-empty {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    font-style: italic;
}

#sot-serp-overlap-tool .sot-url-text {
    font-weight: 400;
    color: var(--sot-ink-strong);
    font-size: 16px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 46px;
}

/* Pairs Horizontal Analysis */
#sot-serp-overlap-tool .sot-pairs-horizontal-container {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

#sot-serp-overlap-tool .sot-pair-item {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    flex: 1;
    min-width: 300px;
    transition: all 0.3s ease;
}

#sot-serp-overlap-tool .sot-pair-item {
    cursor: pointer;
}

#sot-serp-overlap-tool .sot-pair-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-pair-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#sot-serp-overlap-tool .sot-pair-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sot-serp-overlap-tool .sot-pair-title h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sot-ink);
    margin: 0;
}

#sot-serp-overlap-tool .sot-pair-score {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sot-serp-overlap-tool .sot-pair-overlap {
    width: 100%;
}

#sot-serp-overlap-tool .sot-pair-score .sot-score-value {
    font-size: 14px;
    font-weight: 700;
    color: white !important;
}

#sot-serp-overlap-tool .sot-pair-item .sot-pair-score .sot-score-value {
    color: white !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: white !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

#sot-serp-overlap-tool .sot-overlap-bar-container {
    background: var(--sot-bg);
    border-radius: 0;
    height: 12px;
    overflow: hidden;
    position: relative;
}

#sot-serp-overlap-tool .sot-overlap-bar {
    background: var(--sot-navy);
    height: 100%;
    border-radius: 0;
    transition: width 0.5s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    position: relative;
    z-index: 2;
}

/* Same ampel palette as the main score bar above (.sot-overlap-score-container) -
   each pair here should show the same color it would get as a 2-keyword main score. */
#sot-serp-overlap-tool .sot-overlap-bar.sot-success { background: var(--sot-success); }
#sot-serp-overlap-tool .sot-overlap-bar.sot-warning { background: var(--sot-warning-bg); }
#sot-serp-overlap-tool .sot-overlap-bar.sot-error { background: linear-gradient(135deg, var(--sot-error) 0%, var(--sot-error-dark) 100%); }

/* Analysis List */
#sot-serp-overlap-tool .sot-analysis-item {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border: 1px solid var(--sot-border);
    border-radius: 0;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#sot-serp-overlap-tool .sot-analysis-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
}

#sot-serp-overlap-tool .sot-analysis-header:hover {
    background: rgba(29, 78, 216, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

#sot-serp-overlap-tool .sot-analysis-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

#sot-serp-overlap-tool .sot-analysis-icon {
    background: linear-gradient(135deg, var(--sot-navy) 0%, var(--sot-navy) 100%);
    padding: 12px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 60, 98, 0.2);
}

#sot-serp-overlap-tool .sot-analysis-icon i {
    color: white;
    font-size: 20px;
}

#sot-serp-overlap-tool .sot-analysis-info h5 {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--sot-ink);
    font-size: 16px;
}

#sot-serp-overlap-tool .sot-analysis-info p {
    font-size: 14px;
    color: var(--sot-muted);
    font-weight: 500;
}

#sot-serp-overlap-tool .sot-analysis-stats {
    text-align: right;
}

#sot-serp-overlap-tool .sot-analysis-item .sot-analysis-stats .sot-overlap-percentage {
    font-size: 20px;
    font-weight: 800;
    color: var(--sot-ink);
}

#sot-serp-overlap-tool .sot-analysis-stats .sot-overlap-label {
    font-size: 12px;
    color: var(--sot-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sot-serp-overlap-tool .sot-analysis-details {
    padding: 24px;
    border-top: 1px solid var(--sot-border);
    display: none;
    background: var(--sot-bg-soft);
}

#sot-serp-overlap-tool .sot-analysis-details.sot-active {
    display: block;
}

#sot-serp-overlap-tool .sot-analysis-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

#sot-serp-overlap-tool .sot-analysis-metric {
    background: white;
    border: 1px solid var(--sot-border);
    border-radius: 0;
    padding: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

#sot-serp-overlap-tool .sot-analysis-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--sot-navy);
}

#sot-serp-overlap-tool .sot-analysis-metric-label {
    font-size: 12px;
    color: var(--sot-muted);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sot-serp-overlap-tool .sot-analysis-metric-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--sot-ink);
}

/* Footer */
#sot-serp-overlap-tool .sot-footer {
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-border) 100%);
    border-top: 1px solid var(--sot-border);
    margin-top: 80px;
    padding: 40px 0;
    text-align: center;
    color: var(--sot-muted);
    font-weight: 500;
}

/* Loading Overlay */
#sot-serp-overlap-tool .sot-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#sot-serp-overlap-tool .sot-loading-spinner {
    text-align: center;
    color: var(--sot-ink);
    background: white;
    padding: 40px;
    border-radius: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#sot-serp-overlap-tool .sot-loading-spinner i {
    font-size: 48px;
    color: var(--sot-navy);
    margin-bottom: 20px;
    animation: sot-spin 1s linear infinite;
}

#sot-serp-overlap-tool .sot-loading-spinner p {
    font-size: 18px;
    font-weight: 700;
    color: var(--sot-muted);
    letter-spacing: -0.01em;
}

@keyframes sot-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    #sot-serp-overlap-tool .sot-form-card {
        flex-direction: column;
        gap: 24px;
    }
    
    #sot-serp-overlap-tool .sot-form-card form {
        flex-direction: column;
        align-items: stretch;
    }
    
    #sot-serp-overlap-tool .sot-form-card .sot-form-group {
        min-width: auto;
    }
    
    #sot-serp-overlap-tool .sot-hero {
        padding: 32px 0;
        text-align: center;
    }
    
    #sot-serp-overlap-tool .sot-hero h2 {
        font-size: 42px;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    
    #sot-serp-overlap-tool .sot-hero p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    #sot-serp-overlap-tool .sot-features-heading {
        font-size: 36px !important;
        margin-bottom: 24px;
    }
    
    #sot-serp-overlap-tool .sot-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    #sot-serp-overlap-tool .sot-feature-card {
        padding: 20px;
        min-height: auto;
    }
    
    #sot-serp-overlap-tool .sot-feature-card h3 {
        font-size: 18px;
    }
    
    #sot-serp-overlap-tool .sot-feature-card p {
        font-size: 14px;
    }
    
    #sot-serp-overlap-tool .sot-overlap-recommendation-container {
        flex-direction: column;
        gap: 24px;
    }
    
    #sot-serp-overlap-tool .sot-score-value {
        font-size: 36px;
    }

    #sot-serp-overlap-tool .sot-recommendation-card,
#sot-serp-overlap-tool .sot-common-urls-card {
        min-width: auto;
        padding: 20px;
    }

    #sot-serp-overlap-tool .sot-guide-section h3,
#sot-serp-overlap-tool .sot-faq-section h3 {
        font-size: 32px !important;
        flex-direction: column;
        gap: 8px;
    }
    
    #sot-serp-overlap-tool .sot-guide-step {
        padding-left: 48px;
        max-width: 100%;
    }
    
    #sot-serp-overlap-tool .sot-step-badge {
        left: 0;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    #sot-serp-overlap-tool .sot-faq-item {
        padding: 16px;
    }
    
    #sot-serp-overlap-tool .sot-url-comparison-container {
        padding: 20px;
        overflow-x: auto;
    }
    
    #sot-serp-overlap-tool .sot-url-tables-container {
        flex-direction: column;
        gap: 16px;
    }
    
    #sot-serp-overlap-tool .sot-keyword-table-container {
        min-width: 100%;
    }

    #sot-serp-overlap-tool .sot-results-header {
        padding: 20px;
    }
    
    #sot-serp-overlap-tool .sot-results-header h3 {
        font-size: 22px;
    }
    
    #sot-serp-overlap-tool .sot-results-content {
        padding: 20px;
    }
    
    #sot-serp-overlap-tool .sot-results-export-buttons-container {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
        padding-top: 24px;
    }
    
    #sot-serp-overlap-tool .sot-results-export-buttons-container .sot-export-btn {
        width: 100%;
        justify-content: center;
    }
    
    #sot-serp-overlap-tool .sot-analysis-container {
        padding: 20px;
    }
}

@media (max-width: 1024px) {
    /* Was accidentally targeting a class name (.sot-keyword-table) that doesn't
       exist in the markup (the real container is .sot-keyword-table-container),
       so this breakpoint never actually applied - columns stayed at their
       desktop max-width (400px) all the way down to the 768px breakpoint,
       squeezing 2-3 columns into a narrow row instead of shrinking gracefully. */
    #sot-serp-overlap-tool .sot-url-tables-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    #sot-serp-overlap-tool .sot-keyword-table-container {
        min-width: 280px;
        max-width: 460px;
        flex: 1;
    }
}

@media (max-width: 480px) {
    #sot-serp-overlap-tool .sot-container {
        padding: 0 12px;
    }
    
    #sot-serp-overlap-tool .sot-hero h2 {
        font-size: 32px;
        margin-top: 20px;
    }
    
    #sot-serp-overlap-tool .sot-hero p {
        font-size: 14px;
    }
    
    #sot-serp-overlap-tool .sot-features-heading {
        font-size: 28px !important;
    }
    
    #sot-serp-overlap-tool .sot-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    #sot-serp-overlap-tool .sot-feature-card {
        padding: 16px;
    }
    
    #sot-serp-overlap-tool .sot-feature-icon {
        width: 50px;
        height: 50px;
    }
    
    #sot-serp-overlap-tool .sot-feature-icon i {
        font-size: 24px;
    }
    
    #sot-serp-overlap-tool .sot-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #sot-serp-overlap-tool .sot-url-tables-container {
        flex-direction: column;
        gap: 16px;
    }
    
    #sot-serp-overlap-tool .sot-keyword-table-container {
        /* min-width stays 100% (inherited from the 768px breakpoint above) -
           only lift the 380px desktop/tablet cap so the stacked column can use
           the full available width on narrow phones. Setting min-width:auto
           here (as this rule used to, back when it targeted a dead .sot-keyword-table
           selector and never actually applied) collapses the column to its
           shrink-to-fit content width instead, breaking the mobile layout. */
        max-width: none;
    }
    
    #sot-serp-overlap-tool .sot-keyword-table-header {
        padding: 12px;
    }
    
    #sot-serp-overlap-tool .sot-keyword-table-header h5 {
        font-size: 16px;
    }
    
    #sot-serp-overlap-tool .sot-header {
        padding: 12px 0;
    }
    
    #sot-serp-overlap-tool .sot-header-content {
        flex-direction: row;
        gap: 12px;
        height: 60px;
        min-height: 60px;
        padding: 8px 0;
        justify-content: flex-start;
    }
    
    #sot-serp-overlap-tool .sot-header {
        min-height: 60px;
    }
    
    #sot-serp-overlap-tool .sot-header-info {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #sot-serp-overlap-tool .sot-logo {
        margin-left: 0;
        justify-content: flex-start;
    }
    
    #sot-serp-overlap-tool .sot-claneo-logo {
        max-height: 50px;
        height: auto;
        width: auto;
        max-width: 180px;
    }
    
    #sot-serp-overlap-tool .sot-score-value {
        font-size: 28px;
    }
    
    #sot-serp-overlap-tool .sot-score-label {
        font-size: 12px;
    }
    
    #sot-serp-overlap-tool .sot-guide-section h3,
#sot-serp-overlap-tool .sot-faq-section h3 {
        font-size: 24px !important;
    }
    
    #sot-serp-overlap-tool .sot-guide-step {
        padding-left: 44px;
    }
    
    #sot-serp-overlap-tool .sot-step-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    #sot-serp-overlap-tool .sot-guide-step h4 {
        font-size: 15px;
    }
    
    #sot-serp-overlap-tool .sot-guide-step p {
        font-size: 14px;
    }
    
    #sot-serp-overlap-tool .sot-results-header h3 {
        font-size: 20px;
    }
    
    #sot-serp-overlap-tool .sot-results-header h3 i {
        padding: 8px;
        font-size: 18px;
    }
    
    #sot-serp-overlap-tool .sot-export-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Sidebar is hidden on mobile/tablet - no styling needed */
    
    #sot-serp-overlap-tool #sot-features,
#sot-serp-overlap-tool #sot-analysisForm,
#sot-serp-overlap-tool #sot-resultsCard,
#sot-serp-overlap-tool #sot-urlComparison,
#sot-serp-overlap-tool #sot-guide,
#sot-serp-overlap-tool #sot-faq {
        scroll-margin-top: 120px;
    }
    
    #sot-serp-overlap-tool .sot-summary-cards {
        grid-template-columns: 1fr;
    }
    
    #sot-serp-overlap-tool .sot-logo {
        margin-left: 0;
        justify-content: center;
    }
    
    #sot-serp-overlap-tool .sot-claneo-logo {
        max-height: 50px;
        height: auto;
        max-width: 180px;
        width: auto;
    }
    
    #sot-serp-overlap-tool .sot-header-content {
        height: 70px;
        padding: 10px 0;
    }
    
    #sot-serp-overlap-tool .sot-submit-btn,
#sot-serp-overlap-tool .sot-add-keyword-btn {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    #sot-serp-overlap-tool .sot-summary-cards {
        grid-template-columns: 1fr;
    }
    
    #sot-serp-overlap-tool .sot-tabs {
        flex-direction: column;
    }
    
    #sot-serp-overlap-tool .sot-tab-btn {
        border-bottom: none;
        border-right: 2px solid transparent;
    }
    
    #sot-serp-overlap-tool .sot-tab-btn.sot-active {
        border-bottom: none;
        border-right-color: #06b6d4;
    }
}

/* Extra small screens - ensure logo is always visible */
@media (max-width: 484px) {
    #sot-serp-overlap-tool .sot-header {
        padding: 4px 0;
        min-height: 50px;
        overflow: visible;
    }
    
    #sot-serp-overlap-tool .sot-header-content {
        height: 50px !important;
        min-height: 50px !important;
        padding: 2px 0 !important;
        justify-content: flex-start !important;
        align-items: center;
        overflow: visible;
    }
    
    #sot-serp-overlap-tool .sot-header {
        min-height: 50px !important;
        height: auto;
    }
    
    #sot-serp-overlap-tool .sot-logo {
        margin-left: 0 !important;
        justify-content: flex-start;
        width: auto;
        display: flex;
        flex-shrink: 0;
        min-width: 0;
        align-items: center;
    }
    
    #sot-serp-overlap-tool .sot-claneo-logo {
        max-height: 40px !important;
        height: 40px !important;
        max-width: 140px !important;
        width: auto !important;
        object-fit: contain;
        flex-shrink: 0;
        display: block;
    }
    
    #sot-serp-overlap-tool .sot-container {
        padding: 0 4px !important;
        overflow: visible;
    }
    
    #sot-serp-overlap-tool .sot-header .sot-container {
        padding: 0 8px !important;
    }
    
    /* Disable hover effects on mobile */
    #sot-serp-overlap-tool .sot-keyword-row:hover {
        transform: none !important;
    }
    
    #sot-serp-overlap-tool .sot-keyword-row.sot-common-url-2:hover {
        background: rgba(0, 60, 98, 0.1) !important;
        box-shadow: none !important;
    }
    
    #sot-serp-overlap-tool .sot-keyword-row.sot-common-url-3:hover {
        background: rgba(220, 38, 38, 0.1) !important;
        box-shadow: none !important;
    }
    
    #sot-serp-overlap-tool .sot-common-urls-card:hover {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    }
    
    #sot-serp-overlap-tool .sot-pair-item:hover {
        transform: none !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        border-color: var(--sot-border) !important;
    }
    
    #sot-serp-overlap-tool .sot-url-tables-container.sot-url-hover-blur .sot-keyword-row:not(.sot-url-hover-highlight) {
        filter: none !important;
        opacity: 1 !important;
    }
    
    #sot-serp-overlap-tool .sot-keyword-row.sot-url-hover-highlight {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
}

/* Modal Styles */
#sot-serp-overlap-tool .sot-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 0;
    align-items: flex-start;
    justify-content: center;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

#sot-serp-overlap-tool .sot-modal-content {
    background-color: var(--sot-bg);
    margin: 20px auto;
    padding: 0;
    border: 1px solid var(--sot-border);
    border-radius: 0;
    width: 90%;
    max-width: 1200px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    top: 20px;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
}

#sot-serp-overlap-tool .sot-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--sot-border);
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border-radius: 0;
    gap: 16px;
}

#sot-serp-overlap-tool .sot-modal-header h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--sot-ink-strong);
    margin: 0;
    flex: 1;
}

#sot-serp-overlap-tool .sot-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#sot-serp-overlap-tool .sot-modal-close {
    background: none;
    border: none;
    font-size: 32px;
    font-weight: 300;
    color: var(--sot-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.2s ease;
}

#sot-serp-overlap-tool .sot-modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--sot-ink-strong);
}

#sot-serp-overlap-tool .sot-modal-body {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
}

#sot-serp-overlap-tool .sot-modal-stats-container {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 24px;
    padding: 24px;
    background: linear-gradient(135deg, var(--sot-bg-soft) 0%, var(--sot-bg-softer) 100%);
    border-radius: 0;
    border: 1px solid var(--sot-border);
}

#sot-serp-overlap-tool .sot-modal-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: var(--sot-bg);
    border-radius: 0;
    border: 1px solid var(--sot-border);
    min-width: 150px;
}

#sot-serp-overlap-tool .sot-modal-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--sot-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sot-serp-overlap-tool .sot-modal-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--sot-ink-strong);
}

#sot-serp-overlap-tool .sot-consolidation-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--sot-bg-soft);
    border: 1px solid var(--sot-border-strong);
    border-radius: 0;
}

#sot-serp-overlap-tool .sot-consolidation-suggestion i {
    color: var(--sot-navy);
    font-size: var(--sot-text-lg);
    margin-top: 2px;
}

#sot-serp-overlap-tool .sot-consolidation-text {
    font-size: var(--sot-text-base);
    color: var(--sot-ink);
    line-height: 1.5;
}

#sot-serp-overlap-tool .sot-consolidation-text strong {
    color: var(--sot-ink-strong);
}

#sot-serp-overlap-tool .sot-consolidation-url {
    display: inline-block;
    margin-top: 4px;
    font-family: monospace;
    font-size: var(--sot-text-sm);
    color: var(--sot-navy);
    word-break: break-all;
}

#sot-serp-overlap-tool .sot-modal-export-buttons-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--sot-border);
}

@media (max-width: 768px) {
    #sot-serp-overlap-tool .sot-modal-content {
        width: 95%;
        margin: 10% auto;
        max-height: 80vh;
    }
    
    #sot-serp-overlap-tool .sot-modal-header {
        padding: 16px 20px;
        border-radius: 0;
    }
    
    #sot-serp-overlap-tool .sot-modal-header h3 {
        font-size: 20px;
    }
    
    #sot-serp-overlap-tool .sot-modal-body {
        padding: 20px;
    }
    
    #sot-serp-overlap-tool .sot-modal-stats-container {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    #sot-serp-overlap-tool .sot-modal-stat-item {
        min-width: auto;
        padding: 12px 24px;
    }
    
    #sot-serp-overlap-tool .sot-modal-stat-label {
        font-size: 12px;
    }
    
    #sot-serp-overlap-tool .sot-modal-stat-value {
        font-size: 24px;
    }
    
    #sot-serp-overlap-tool .sot-modal-export-buttons-container {
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
        padding-top: 20px;
    }
    
    #sot-serp-overlap-tool .sot-modal-export-buttons-container .sot-export-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 450px) {
    #sot-serp-overlap-tool .sot-modal-header {
        padding: 12px 16px;
    }
    
    #sot-serp-overlap-tool .sot-modal-header h3 {
        font-size: 18px;
    }
    
    #sot-serp-overlap-tool .sot-modal-header-actions {
        gap: 4px;
    }
    
    #sot-serp-overlap-tool .sot-modal-header-actions .sot-export-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    #sot-serp-overlap-tool .sot-modal-header-actions .sot-export-btn i {
        font-size: 12px;
    }
    
    #sot-serp-overlap-tool .sot-modal-close {
        width: 28px;
        height: 28px;
        font-size: 24px;
    }
}