/* ============================================================
   Smart Owl Keywords — Frontend Styles
   ============================================================ */

.sok-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 960px;
    margin: 0 auto;
    color: #1a1a2e;
}

/* Header — matches Smart Owl Plugin Stack branding */
.sok-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding: 18px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a2a6c 0%, #2e4a9e 50%, #3a6fd8 100%);
    position: relative;
    overflow: hidden;
}
/* Subtle circle accent like the reference image */
.sok-header::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.sok-owl { font-size: 1.7rem; line-height: 1; }
.sok-title {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Input area */
.sok-input-area {
    background: #f8f9ff;
    border: 1px solid #dde1f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.sok-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #444;
}
.sok-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #c8cde8;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    transition: border-color 0.2s;
    line-height: 1.5;
}
.sok-textarea:focus {
    outline: none;
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.12);
}

/* Controls row */
.sok-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.sok-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4a6cf7, #2c47d9);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 12px rgba(74, 108, 247, 0.35);
}
.sok-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(74, 108, 247, 0.45);
}
.sok-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.sok-btn-icon { font-size: 1.1rem; }

.sok-count {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
}
.sok-count.sok-count-warn { color: #e05a00; font-weight: 700; }

/* Loading */
.sok-loading {
    text-align: center;
    padding: 40px 20px;
    color: #555;
}
.sok-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e8eaf6;
    border-top-color: #4a6cf7;
    border-radius: 50%;
    animation: sok-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes sok-spin { to { transform: rotate(360deg); } }

/* Error */
.sok-error {
    background: #fff3f3;
    border: 1px solid #f5b7b1;
    border-radius: 8px;
    padding: 14px 18px;
    color: #c0392b;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Results wrap */
.sok-results-wrap { animation: sok-fadein 0.4s ease; }
@keyframes sok-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Section titles */
.sok-section-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 28px 0 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sok-subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
}

/* Main table */
.sok-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e0e4f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sok-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #fff;
}
.sok-table thead tr {
    background: linear-gradient(135deg, #4a6cf7, #2c47d9);
    color: #fff;
}
.sok-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.sok-th-num { text-align: right !important; }
.sok-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #f0f2fa;
    vertical-align: middle;
}
.sok-table td.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.sok-table tbody tr:last-child td { border-bottom: none; }
.sok-table tbody tr:nth-child(even) { background: #f8f9ff; }
.sok-table tbody tr:hover { background: #eef1fd; }

/* Volume badges */
.sok-vol-high   { color: #16a34a; font-weight: 700; }
.sok-vol-med    { color: #d97706; font-weight: 600; }
.sok-vol-low    { color: #6b7280; }
.sok-vol-none   { color: #d1d5db; font-style: italic; }

/* CPC */
.sok-cpc        { font-weight: 600; color: #1a1a2e; }
.sok-cpc-zero   { color: #d1d5db; }

/* Competition pill */
.sok-comp {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sok-comp-high   { background: #fee2e2; color: #991b1b; }
.sok-comp-medium { background: #fef3c7; color: #92400e; }
.sok-comp-low    { background: #d1fae5; color: #065f46; }
.sok-comp-na     { background: #f3f4f6; color: #9ca3af; }

/* Suggestions section */
#sok-suggestions-inner { margin-top: 4px; }
.sok-sug-group {
    background: #fff;
    border: 1px solid #e0e4f0;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.sok-sug-header {
    background: #f0f2ff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    color: #3d4fd6;
    border-bottom: 1px solid #e0e4f0;
}
.sok-sug-seed { font-weight: 700; }
.sok-sug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.sok-sug-table th {
    padding: 8px 14px;
    background: transparent;
    font-size: 0.77rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    text-align: left;
    border-bottom: 1px solid #f0f2fa;
}
.sok-sug-table th.th-num { text-align: right; }
.sok-sug-table td { padding: 9px 14px; border-bottom: 1px solid #f8f9ff; }
.sok-sug-table td.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.sok-sug-table tr:last-child td { border-bottom: none; }
.sok-sug-table tr:hover td { background: #f8f9ff; }

.sok-no-sug {
    padding: 20px 24px;
    color: #aaa;
    font-style: italic;
    font-size: 0.9rem;
}

/* Export bar */
.sok-export-bar {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sok-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #4a6cf7;
    border: 1px solid #c8cde8;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sok-export-btn:hover {
    background: #f0f2ff;
    border-color: #4a6cf7;
}

@media (max-width: 600px) {
    .sok-controls { flex-direction: column; align-items: flex-start; }
    .sok-table th, .sok-table td { padding: 8px 10px; }
}

/* Suggestion card loading placeholder */
.sok-sug-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: #aaa;
    font-size: 0.88rem;
    font-style: italic;
}
.sok-sug-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e4f0;
    border-top-color: #4a6cf7;
    border-radius: 50%;
    animation: sok-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ============================================================
   FREE TIER OVERLAY
   ============================================================ */
.sok-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 40, 0.82);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: sok-fadein 0.35s ease;
}
.sok-overlay-box {
    background: #fff;
    border-radius: 16px;
    max-width: 860px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}
.sok-overlay-header {
    background: linear-gradient(135deg, #1a2a6c 0%, #2e4a9e 50%, #3a6fd8 100%);
    padding: 28px 32px 20px;
    text-align: center;
}
.sok-overlay-owl  { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.sok-overlay-headline {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 6px;
}
.sok-overlay-sub {
    color: rgba(255,255,255,0.82);
    font-size: 0.95rem;
    margin: 0;
}
.sok-overlay-body { padding: 28px 24px 32px; }

/* Three pricing cards */
.sok-plans {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    align-items: stretch;
}
.sok-plan {
    flex: 1;
    border: 2px solid #e0e4f0;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.sok-plan:hover {
    border-color: #4a6cf7;
    box-shadow: 0 4px 18px rgba(74,108,247,0.15);
    transform: translateY(-2px);
}
/* Middle card is larger / featured */
.sok-plan.sok-plan-featured {
    border-color: #4a6cf7;
    box-shadow: 0 6px 24px rgba(74,108,247,0.2);
    transform: scale(1.04);
    background: linear-gradient(160deg, #f0f4ff, #fff);
}
.sok-plan.sok-plan-featured:hover { transform: scale(1.04) translateY(-2px); }

.sok-plan-badge {
    display: inline-block;
    background: #4a6cf7;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.sok-plan-name  { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; }
.sok-plan-price { font-size: 1.8rem; font-weight: 800; color: #4a6cf7; margin: 0 0 4px; }
.sok-plan-price span { font-size: 0.85rem; font-weight: 500; color: #888; }
.sok-plan-desc  { font-size: 0.82rem; color: #666; margin: 0 0 16px; flex: 1; line-height: 1.5; }
.sok-plan-btn {
    display: block;
    background: linear-gradient(135deg, #4a6cf7, #2c47d9);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
    margin-top: auto;
}
.sok-plan-btn:hover { opacity: 0.88; }
.sok-plan-featured .sok-plan-btn {
    background: linear-gradient(135deg, #f0a500, #d4870a);
    box-shadow: 0 3px 12px rgba(240,165,0,0.35);
}

/* Email capture in overlay */
.sok-overlay-email-row {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto 16px;
}
.sok-overlay-email-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #c8cde8;
    border-radius: 7px;
    font-size: 0.9rem;
    outline: none;
}
.sok-overlay-email-input:focus { border-color: #4a6cf7; }

.sok-overlay-note {
    text-align: center;
    font-size: 0.8rem;
    color: #aaa;
    margin: 0;
}
.sok-overlay-note a { color: #4a6cf7; }

@media (max-width: 600px) {
    .sok-plans { flex-direction: column; }
    .sok-plan.sok-plan-featured { transform: none; }
}

/* Fallback suggestion note */
.sok-sug-note {
    font-size: 0.82rem;
    color: #7a6f4e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    line-height: 1.5;
}