@charset "UTF-8";
/* CSS Document */

/* Share of Answer – frontend */
.soa-widget {font-size:18px; line-height:1.4; gap:10px; color:#28282B; font-family: "bell-centennial-std-address", sans-serif;}
.soa-widget strong {font-family: "bell-centennial-std-name-num", sans-serif; font-weight:normal;}
.soa-widget .soa-help {font-size:14px; max-width:600px;}
.soa-widget code {font-size:13px;}
.soa-widget .soa-muted { color:#666; }
.soa-widget .soa-controls { display:flex; flex-wrap:wrap; gap:var(--gap); align-items:flex-end; margin:8px 0 12px; }
.soa-widget .soa-field { display:flex; flex-direction:column; gap:4px; }
.soa-widget input[type="text"], .soa-widget input[type="number"], .soa-widget select, .soa-widget textarea { font-size:16px; padding:6px 8px 6px 10px; color: #28282B; border: 1px solid #9B59B633; border-radius: 0px; background-color: #fff;}
.soa-widget .soa-btn { font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; }
.soa-widget #soa_lists_local {background: #9B59B6cc; color:#fff; }
.soa-widget #soa_lists_save {background: #9B59B666; color:#fff; display:none;}
.soa-widget .soa-preset {background: #F8FEFF; }
.soa-widget .soa-preset:last-of-type {background:#fff;}

.soa-widget .soa-statuschips {display:block; width:100%;}
.soa-widget .soa-statuschips span.warn {padding-left: 20px; color:#CC5500;}

.soa-widget .soa_plan_kn {display:block; width:100%;}


.soa-widget .soa-btn.primary { background:#9B59B6; border:1px solid #9B59B6; color:#fff; padding: 10px 30px; border-radius: 46px; max-width:100px; font-size: 18px; font-family: "bell-centennial-std-name-num", sans-serif !important; margin-top:-10px;}

/* Disabled state for primary button */
.soa-widget .soa-btn.primary:disabled,
.soa-widget .soa-btn.primary[disabled],
.soa-widget .soa-btn.primary.is-disabled,
.soa-widget .soa-btn.primary[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(0.5);
  background: #c9a7d7;    /* lite ljusare än #9B59B6 */
  border-color: #c9a7d7;
  box-shadow: none;
}

/* Ta bort hover/active-effekter när den är disabled */
.soa-widget .soa-btn.primary:disabled:hover,
.soa-widget .soa-btn.primary[disabled]:hover,
.soa-widget .soa-btn.primary.is-disabled:hover {
  background: #c9a7d7;
  border-color: #c9a7d7;
}

/* (valfritt) fokusring av när disabled */
.soa-widget .soa-btn.primary:disabled:focus {
  outline: none;
  box-shadow: none;
}


.soa-widget .export-kn {margin-bottom:20px; text-align:right;}
.export-projects-kn  {margin-bottom:20px; text-align:right; transform:translateY(-56px);}
.soa-widget #soa_save_run_csv, .soa-widget #soa_export_csv, .export-projects-kn #soa-proj-export { background:#fff; color:#28282b; border:1px solid #9B59B6; padding: 10px 30px; border-radius: 46px; max-width:100px; font-size: 16px; font-family: "bell-centennial-std-address", sans-serif !important; margin-left:80px; text-align:center;}
.soa-widget .soa-alpha .soa-alpha-row { display:flex; gap:6px; align-items:center; }
.soa-widget .soa-preset-row { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.soa-widget .soa-lists { border-top:1px solid #9B59B666; border-bottom:1px solid #9B59B666; padding:16px 16px; margin:8px 0 12px; background:#9B59B611; }
.soa-widget .soa-lists-rows { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.soa-widget .soa-col { flex:1; min-width:260px; }
.soa-widget input[type="text"] {min-height:36px; border: none; border-bottom: 1px solid #9B59B6;}
.soa-widget .soa-field-wide input::placeholder {color:#6B8E2399; font-size: 17px;}
.soa-widget textarea { width:95%; min-height:120px; resize: none; }
.soa-widget textarea#soa_comp { width:95%; min-height:120px; }

.soa-widget .advanced-kn {background:#fff; padding:20px; max-width:640px;}
.soa-widget .localization-kn {display:flex; gap:20px; align-items:center;}
.soa-widget .localization-kn > div {flex-basis: calc(33% - 10px);}

@media (max-width: 440px){
.soa-col label small {font-size:14px;}    
.soa-widget .localization-kn {flex-wrap: wrap;}
.soa-widget .localization-kn > div {flex-basis: calc(50% - 16px);}
}

.soa-widget #soa_llm_toggle_mentions, .top-llm-mention--kn {background: #F8FEFF;  margin-bottom:30px; font-size:14px; padding:10px 16px; cursor:pointer; border-radius: 46px; }
.top-llm-mention--kn {margin-top:20px;}

.soa-widget .soa-instructions summary { font-size:15px; cursor:pointer;  }
.soa-widget .soa-instructions-body { font-size:14px; margin-top:6px; }
.soa-widget .soa-instructions-body p { margin-bottom:0px; }
.soa-widget .soa-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.soa-widget .soa-warn { color:#b32d2e; font-size:13px; margin-top:4px; }


.soa-info{display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem; margin-left:.4rem; border-radius:999px; background:#E1B7CE; font:inherit; font-family: "bell-centennial-std-name-num", sans-serif; font-size:.9rem; line-height:1rem; cursor:pointer; padding:0px; transform: translateY(-8px); color:#fff;}
.soa-info:hover{ background:#eef2f7; }
.soa-info:focus{ outline:2px solid #4f46e5; outline-offset:2px; }
.soa-infopop{ z-index: 50; }
.soa-infopop.is-open{ /* synlig; du bestämmer stil */ }
.soa-infopop-inner{ background:#fff; border:1px solid #ddd; border-radius:.5rem; box-shadow:0 10px 30px rgba(0,0,0,.08); max-width:360px; }
.soa-infopop-header{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; border-bottom:1px solid #eee; }
.soa-infopop-body{ padding:.75rem; }
.soa-infopop-body pre{ margin:0; white-space:pre-wrap; font-family:inherit; }
.soa-infopop-close{ background:transparent; border:0; font-size:1.1rem; line-height:1; cursor:pointer; }
.soa-infopop-backdrop { background: rgba(0,0,0,.04); }

.soa-widget .soa-muted.is-error {color:red; border-top:2px solid red; padding:6px 12px;}


.soa-field-wide {display:block; width: 100%; margin-bottom: 16px; }
.soa-field-wide input {max-width:900px;}
.soa-provider-groups {display:block; width: 100%;}
.soa-providers {display: block; width: 100%; margin-bottom:10px;}
.soa-check {margin-right: 6px;}

.soa-table .is-dim { opacity:.6; }
#soa_blend { padding-right: 28px; }

.soa-badge-ai,
.soa-badge-snippet {display:inline-block; margin-left:6px; padding:2px 6px; border-radius:10px; font-size:12px; line-height:1.4; border:1px solid #E1B7CE;}
.soa-badge-ai { background:#f0f7ff; }
.soa-badge-snippet { background:#f7fff0; }

.soa-badge{ display:inline-block; font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid #E1B7CE; margin-left:6px; }
.soa-badge-serp {border-color:#4caf50; }

.soa-advanced {display:block; width: 100%;}

/* Checkboxes  */
.soa-check, .serp-kn, .llm-kn {display: inline-flex; align-items: center; gap: 8px; font-size: 18px; cursor: pointer; position: relative; margin-right: 18px; margin-bottom: 18px; vertical-align: middle;}
.soa-check input[type="checkbox"], .serp-kn input[type="checkbox"], .llm-kn input[type="checkbox"]{appearance: none; width: 24px; height: 24px; border: 1px solid #9B59B633; background: #E1B7CE66; transition: border 0.2s, background 0.2s; outline: none; position: relative; margin: 0;}
.soa-check input[type="checkbox"]:hover, .serp-kn input[type="checkbox"]:hover, .llm-kn input[type="checkbox"]:hover {border-color: #6B8E23; background: #DCE6F1;}
.soa-check input[type="checkbox"]:checked,.serp-kn input[type="checkbox"]:checked, .llm-kn input[type="checkbox"]:checked  {background: #9B59B6; border-color: #6B8E23;}
.soa-check input[type="checkbox"]:checked::after, .serp-kn input[type="checkbox"]:checked::after, .llm-kn input[type="checkbox"]:checked::after {content: ''; position: absolute; left: 7px; top: 4px; width: 7px; height: 12px; border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg);}
.soa-check span, .serp-kn span, .llm-kn span {color: #28282B; font-size: 18px; padding-right:10px; }

.soa-proj-kw-list {display: flex; flex-direction:column; align-items: flex-start; gap: 8px; cursor: pointer; position: relative; margin-bottom: 18px;  }
.soa-proj-kw-list  input[type="checkbox"]{appearance: none; width: 20px; height: 20px; border: 1px solid #9B59B633; background: #E1B7CE66; transition: border 0.2s, background 0.2s; outline: none; position: relative; margin: 0;}
.soa-proj-kw-list  input[type="checkbox"]:hover {border-color: #6B8E23; background: #DCE6F1;}
.soa-proj-kw-list  input[type="checkbox"]:checked {background: #9B59B6; border-color: #6B8E23;}
.soa-proj-kw-list  input[type="checkbox"]:checked::after {content: ''; position: absolute; left: 5px; top: 2px; width: 7px; height: 12px; border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg);}
.soa-proj-kw-list label {vertical-align:middle; }
.soa-proj-kw-list span {display:inline-block; color: #28282B; font-family: "bell-centennial-std-address", sans-serif; font-size: 16px; line-height:20px; padding-left:6px; transform:translateY(-4px);}

.llm-serp-toggle-kn {display: block; margin-bottom: 18px;}
.llm-serp-toggle-kn label {position: relative; padding-left: 56px; cursor: pointer; line-height: 24px; display: block; font-size: 16px; font-family: "bell-centennial-std-address", sans-serif; color: #28282B;}
/* Dölj checkboxen */
.llm-serp-toggle-kn input[type="checkbox"] {opacity: 0; width: 44px; height: 24px; position: absolute; left: 0; top: 0; margin: 0; z-index: 2; cursor: pointer;}
/* Bakgrund på switchen */
.llm-serp-toggle-kn label:before {content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 24px; background: #E1B7CE; border-radius: 16px; transition: background 0.3s; box-sizing: border-box;}
/* Den rörliga knappen */
.llm-serp-toggle-kn label:after {content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(.4,0,.2,1); box-shadow: 0 1px 2px rgba(50,52,53,.11); z-index: 1;}
/* När checkbox är ikryssad - ändra bakgrund och flytta knappen med translateX */
.llm-serp-toggle-kn label:has(input[type="checkbox"]:checked):before {background: #9B59B6; /* Lavendel (på) */}
.llm-serp-toggle-kn label:has(input[type="checkbox"]:checked):after {transform: translateX(20px);}
/* Hover och fokus-effekter */
.llm-serp-toggle-kn label:hover:before, .llm-serp-toggle-kn label:focus-within:before {background: #DCE6F1; /* Ljusgråblå hover */}

.top-llm-box--kn {display: flex; gap: 8px; align-items: center;}

/* Gör checkboxen till switch */
.top-llm-box--kn input[type="checkbox"] {
  appearance: none;
  width: 44px;
  height: 24px;
  background: #E1B7CE;
  border-radius: 16px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background 0.3s;
  border: none;
  box-shadow: 0 1px 2px rgba(50,52,53,.12);
  vertical-align: middle;
}

/* "Knappen" på switchen */
.top-llm-box--kn input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 2px rgba(50,52,53,.14);
}

/* Påslagen: färg och flytta knappen */
.top-llm-box--kn input[type="checkbox"]:checked {
  background: #9B59B6;
}

.top-llm-box--kn input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

/* Fokuserad/hover */
.top-llm-box--kn input[type="checkbox"]:hover,
.top-llm-box--kn input[type="checkbox"]:focus {
  background: #DCE6F1;
}

.soa-llm-list {list-style: none; margin:0px 0px 20px 0px !important;}

.soa-sub{display:block; font-size:13px; opacity:.7; margin-top:1px;}

.serphead-kn, .llmhead-kn {display:inline-block; padding-right:10px;}

.soa-meta {font-size: 13px; color: #28282b; background: #fff; border:1px solid #E1B7CE; padding:20px; display:inline-block; width:100%; max-width: 580px;}
.soa-meta .soa-badge{ display:inline-block; font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid #ccc; margin-right:6px; }
.soa-meta-brief {margin-top:10px;}
.soa-meta-competitors {display:block; width:100%; max-width: 580px; border:1px solid #9B59B6; margin-top: 16px; clear: both; font-size: 16px; }

.soa-ver-suffix { opacity: .8; }
@media (max-width: 640px){
  .soa-ver-suffix { display:inline-block; margin-left:4px; }
}


#soa-projects {padding:0px 20px; font-family: "bell-centennial-std-address", sans-serif;}

#soa-projects h2 {font-size:14px; text-transform: uppercase; letter-spacing: 0.08em;}
#soa-projects h3 {font-size:18px; font-family: "bell-centennial-std-name-num", sans-serif; }

#soa-projects #soa-proj-create-btn {background: #E1B7CE; border:1px solid #E1B7CE; color:#fff; font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; margin-bottom:10px; }
#soa-projects table {color:#28282B; font-family: "bell-centennial-std-address", sans-serif;}
.soa-proj-table button {background: #fff; color:#28282B; font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; margin:4px 0px; border:1px solid #E1B7CE;}

#soa-projects-root #soa-proj-back {background: #fff; border:1px solid #E1B7CE; color:#28282b; font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; margin-bottom:20px; }
#soa-projects-root #soa-proj-edit {background: #E1B7CE; border:1px solid #E1B7CE; color:#28282b; font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; margin-bottom:10px; border-radius:36px; }

#soa-projects-root #soa-proj-save {background: #E1B7CE; border:1px solid #E1B7CE; color:#28282b; font-size:14px; padding:10px 26px; border-radius:0px; cursor:pointer; margin-bottom:10px; border-radius:36px; margin-right:36px;}
#soa-projects-root #soa-proj-cancel {background: #fff; border:1px solid #E1B7CE; color:#282828; font-size:14px; padding:10px 18px; border-radius:0px; cursor:pointer; margin-bottom:10px; border-radius:36px; }

#soa-projects-root #soa-proj-run-some {background: #9B59B699; border:1px solid #9B59B6; color:#fff; font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; margin-bottom:10px; border-radius:36px; margin-right:36px;}
#soa-projects-root #soa-proj-run-all {background: #9B59B6; border:1px solid #9B59B6; color:#fff; font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; margin-bottom:10px; border-radius:36px; }

.soa-proj-edit {border:none; border-top:1px solid #9B59B6; border-bottom:1px solid #9B59B6; padding:20px; background:#fff;}
.soa-proj-edit input[type="text"] {min-height:36px; border: none; border-bottom: 1px solid #9B59B6;}
.soa-proj-edit input[type="number"], .soa-proj-edit select, .soa-proj-edit textarea { font-size:16px; padding:6px 8px 6px 10px; color: #28282B; border: 1px solid #9B59B633; border-radius: 0px; background-color: #fff;}
.soa-proj-edit textarea {max-width:95%; resize:none;}
.soa-proj-edit .soa-preset { font-size:14px; padding:10px 16px; border-radius:0px; cursor:pointer; background: #F8FEFF; }
.soa-proj-edit .soa-preset:last-of-type {background:#fff;}

#soa-projects .soa-alpha-presets {width:100%; margin-bottom:20px;}
.soa-help {font-family: "bell-centennial-std-address", sans-serif; max-width:600px; margin-top:20px;}

#soa-view-toggle {background: #fff; border:1px solid #E1B7CE; color:#282828; font-size:14px; padding:10px 18px; border-radius:0px; cursor:pointer;  }
#soa-proj-delete {background: #CC5500; border:1px solid #CC5500; color:#fff; font-size:14px; padding:10px 18px; border-radius:0px; cursor:pointer; margin-left: 90px; }

#soa-proj-meta {border:1px solid #eee;background:#fff;border-radius:6px;font-size:13px; max-width:640px;}
#soa-proj-meta strong {font-family: "bell-centennial-std-name-num", sans-serif; font-weight:normal !important;}
.top-serp-kn, .top-llm-kn {font-family: "bell-centennial-std-name-num", sans-serif; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;}
.viewdesc-kn {font-family: "bell-centennial-std-address", sans-serif; font-size:13px; opacity: 0.8;}

#soa-proj-lastrun-tip {margin-top:20px !important; font-size:20px; }
#soa-proj-lastrun-tip button  { background:#fff; color:#28282b; border:1px solid #9B59B6; padding: 10px 30px; border-radius: 46px; max-width:100px; font-size: 16px; font-family: "bell-centennial-std-address", sans-serif !important; margin-left:80px; text-align:center; margin-left:20px;}

#soa-proj-topurls ul {list-style: none; margin:0px 0px 20px 0px !important;}

.soa-proj-table { width:100%; border-collapse:collapse; }
.soa-proj-table td {border-bottom:1px solid #9B59B6; padding:6px 8px; text-align:left; }
.soa-proj-table th {border-bottom:1px solid #9B59B6; padding:6px 8px; text-align:left; font-family: "bell-centennial-std-name-num", sans-serif;  }

.provsource-kn {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.proj-lists-areas-kn {display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

.provsource-tag {display:inline-block; font-size: 12px; opacity: 0.75; padding: 1px 6px; border: 1px solid #E1B7CE; border-radius: 999px; margin-right: 4px;}

/* Dölj ev. inbyggd marker om den finns */
details > summary.top-serp-kn::-webkit-details-marker, details > summary.top-llm-kn::-webkit-details-marker {display: none;}

/* Summary: texten, inte flex, med plats för pil till vänster */
details > summary.top-serp-kn, details > summary.top-llm-kn {font-family: "bell-centennial-std-name-num", sans-serif; position: relative; padding-left: 1.2em; cursor: pointer;}

/* Egen pil som alltid ligger bredvid första textraden */
details > summary.top-serp-kn::before, details > summary.top-llm-kn::before {content: "▸"; position: absolute; left: 0; top: 0.15em; }

/* När details är öppet – byt pil */
details[open] > summary.top-serp-kn::before, details[open] > summary.top-llm-kn::before {content: "▾";}

.top-serp-toggle-kn {background: #F8FEFF;  margin-bottom:30px; font-size:14px; padding:10px 16px; cursor:pointer; border-radius: 46px; }

.soa-topurls-multi-kn {display:flex; flex-wrap:wrap; gap:16px; flex-direction: column; margin-bottom:20px; }
.soa-topurls-col-kn {min-width:220px;}

/* Standalone-layout: dölj Källa/Modell-kolumnerna när tabellen är markerad */
#soa_table.soa-hide-meta th.soa-meta-col,
#soa_table.soa-hide-meta td.soa-meta-col {
  display: none;
}


@media (max-width: 600px) {
.provsource-kn, .proj-lists-areas-kn {grid-template-columns: 1fr;}
.proj-lists-areas-kn label {line-height:20px;}
#soa-proj-topurls .top-llm-mention--kn {margin-top:10px;}
.soa-proj-table td, .soa-proj-table th {font-size:14px; word-break: keep-all; line-height: 18px;  }
.soa-proj-table button {padding:8px 12px;}
    
#soa-proj-results .soa-table-scroll {position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;}
#soa-proj-results .soa-table-scroll .soa-proj-table {min-width: 540px; /* bredare än mobilen, så scroll triggas */}
#soa-proj-results .soa-table-scroll::after {content: "↔ Svep för att se alla kolumner"; position: absolute; bottom: 4px; right: 8px; font-size: 11px; padding: 2px 6px; background: rgba(225, 183, 206, 0.6); border-radius: 3px; box-shadow: 0 0 4px rgba(0,0,0,0.15); pointer-events: none;}
.soa-proj-actions {width: 100%;}
#soa-list-wrap {margin-top:30px;}  
#soa-projects {padding: 0px;}
    #soa-projects-root #soa-proj-run-some {margin-right:20px;}
.soa-widget #soa_save_run_csv, .soa-widget #soa_export_csv, .export-projects-kn #soa-proj-export {padding: 10px 16px; margin-left:120px;}
.top-serp-kn, .top-llm-kn {gap: 2px;}
    #soa-proj-lastrun-tip button {padding:10px 20px;}
}

/*. LOG IN. */
.soa-login-hero .soa-sub {font-size:16px;}

.soa-tabs{display:flex; gap:.5rem; align-items:center; margin:1rem 0 0rem; z-index:1;}

/* Tab buttons */
.soa-tab {
  appearance: none;
  -webkit-appearance:none;
  background: #fff;
  color: #111;
  border-color: #F3E4EB;
  border-bottom-width:0px;
  padding: .6rem 1rem;
  border-radius: 10px 10px 0 0;
  font: inherit;
  cursor: pointer;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.soa-tab:hover{ background:#f5f5f5; }
.soa-tab:active{ transform:translateY(2px); }

/* Active tab state */
.soa-tab.is-active,
.soa-tab[aria-selected="true"] {
  background: #F3E4EB;
  color: #fff;
  border-color: #F3E4EB;
  border-bottom-width:0px !important;
    border:none !important;
}

/* Optional a11y focus */
.soa-tab:focus {
  outline: none;
  box-shadow: none;
}

/* Panels: toggle visibility via .is-active */
.soa-panels {position: relative; padding:20px; background:#F3E4EB; margin-top:-2px; z-index: 10; border:none !IMPORTANT; border-top-color: #F3E4EB !important;}
.soa-panel { display: none; margin-bottom:-20px;}
.soa-panel.is-active { display: block; }

/* Visa/dölj formulären via klass */
#soa-login,
#soa-register { display: none; }
#soa-login.is-active,
#soa-register.is-active { display: block; }


/* Små förbättringar för formulär inne i paneler */
.soa-form{ display:grid; gap:.75rem; }
.soa-label{ display:grid; gap:.35rem; color:#111827; font-family: "bell-centennial-std-address", sans-serif;  }
.soa-input{
  width:99%;
  border:1px solid #E1B7CE;
  border-radius:0px;
  padding:.65rem .8rem;
  background:#ffffff99;
}
.soa-input:focus{ outline:none; box-shadow:0 0 0 3px rgba(17,24,39,.15); }

/* Knapprad under formulär */
.soa-actions{ margin-top:.25rem; display:flex; gap:.5rem; align-items:center; }
.soa-panel .soa-btn{
  appearance:none;
  border:0;
  border-radius:24px;
  padding:0px 20px;
  background:#9B59B6;
  color:#ffffff; 
  font-family: "bell-centennial-std-name-num", sans-serif !important;
    font-size:16px;
    line-height:42px;
  cursor:pointer;
    margin:10px 0px 20px;
}
.soa-btn:hover{ filter:brightness(1.03); }
.soa-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(17,24,39,.15); }

/* Alert / microcopy */
.soa-alert{
  margin:.75rem 0 1rem;
  padding:.75rem 1rem;
  border:1px solid #fecaca;
  background:#fff1f2;
  border-radius:12px;
  color:#7f1d1d;
}

.soa-micro {font-family: "bell-centennial-std-address", sans-serif; color:#111827; }
.soa-micro a {color:#9B59B6;}

.soa-perks {font-family: "bell-centennial-std-address", sans-serif; color:#111827; font-size: 16px;}
.soa-perks strong {font-family: "bell-centennial-std-name-num", sans-serif; color:#111827;  font-size: 14px;}
ul.soa-perks {list-style: none; margin-left: 20px; display:block; position:relative; margin-bottom: 4px;}
ul.soa-perks li {padding-bottom:10px; display:block; }
ul.soa-perks li:nth-of-type(1) {padding-top:10px;  }
ul.soa-perks li:before {content: '– '; position:absolute; left:-20px; }

.soa-info-login {margin-top:30px;}
.soa-info-login h2 {font-size:24px;}


/* Kort grid nedanför (om du använder .soa-grid/.soa-card) */
.soa-grid { display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem; }
.soa-card {border:1px solid #E1B7CE99; border-radius:6px; padding:14px; background:#fff; margin-bottom:30px;}
.soa-card h3 {margin:0px; font-size:18px;}
.soa-card p {margin:0px; }


.soa-account  {max-width: 640px; position: relative; padding:14px 30px; background:#F3E4EB; z-index: 10; margin-bottom:20px; }

.soa-account h2.smallh2-kn {font-size:24px;}
.soa-account .noaccount-kn {font-size:16px;}
.soa-account .noaccount-kn a {color:#9B59B6;}
.soa-account .noaccount-kn a:hover {color:#9B59B677;}
.soa-account .soa-cta {margin-top:30px; font-family: "le-monde-sans-std-2", sans-serif; }


.soa-account #loginform p label {
  display:block;
  font-family: "bell-centennial-std-address", sans-serif;
  margin-bottom: .35rem;
}

.soa-account #loginform input[type="text"],
.soa-account #loginform input[type="password"] {
  width: 100%;
  border: 1px solid #E1B7CE;
  padding: .65rem .8rem;
  background: #ffffff99;
  box-sizing: border-box;
}

.soa-account #loginform input[type="submit"] {
  border:0;
  border-radius:24px;
  padding:0 20px;
  background:#9B59B6;
  color:#fff;
  font-family: "bell-centennial-std-name-num", sans-serif;
  font-size:16px;
  line-height:42px;
  cursor:pointer;
  margin:10px 0 20px;
}


@media (min-width: 720px){
  .soa-grid {grid-template-columns:repeat(3,1fr); }
}


/* RESULTS */
.soa-widget .soa-table-wrap { overflow:auto; }
.soa-widget .soa-table { border-collapse:collapse; width:100%; }
.soa-widget .soa-table th, .soa-widget .soa-table td { padding:8px 10px; border-bottom:1px solid #ececec; white-space:nowrap; text-align:left; }
.soa-widget .soa-table th { background:#f6f7f7; font-weight:600; }
.soa-widget .soa-table td:nth-child(1) { white-space:normal; }
.soa-widget .soa-table th:nth-child(n+4), .soa-widget .soa-table td:nth-child(n+4) { text-align:right; }

.soa-topurls-toggle {background: #F8FEFF;  margin-left:20px; font-size:14px; padding:10px 16px; cursor:pointer; border-radius: 46px; }

.soa-llm-list {padding-left:20px;}

@media (min-width: 801px) {
.soa-widget .soa-table {min-width: 800px;}
}
/* MOBIL: upp till 800px – gör tabellen scrollbar och sätt en mobil-anpassad min-width */
@media (max-width: 800px) {
.soa-table-wrap {margin-bottom: 1.5rem; }
.soa-table-wrap .soa-table-scroll {position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.soa-table-wrap .soa-table-scroll .soa-table {min-width: 700px; /* bredare än mobilen, så scroll triggas */}
.soa-table-wrap .soa-table-scroll .soa-table th, .soa-table-wrap .soa-table-scroll .soa-table td {white-space: nowrap;}
.soa-table-wrap .soa-table-scroll::after {content: "↔ Svep för att se alla kolumner"; position: absolute; bottom: 4px; right: 8px; font-size: 11px; padding: 2px 6px; background: rgba(225, 183, 206, 0.6); border-radius: 3px; box-shadow: 0 0 4px rgba(0,0,0,0.15); pointer-events: none;}
.soa-table-wrap .soa-meta-box, .soa-table-wrap .soa-top-urls { margin-top: 1rem;}
    
.soa-widget .soa-table td:nth-child(1) {min-width:100px;}
}

@media (max-width: 600px) {
.soa-widget .soa-table th, .soa-widget .soa-table td {font-size:15px;}
.soa-sub { font-size:12px;}
.soa-topurls-header strong {display:block; width: 100%;}
.soa-topurls-src, .soa-topurls-list, .soa-llm-list {font-size:15px;}
.soa-topurls-toggle {display:block; margin-left:0px; margin-bottom:10px;}
.soa-topurls-list, .soa-llm-list {margin:0 0 1.5em 0 !important;}
.soa-llm-list {padding-left:0px;}

}

/* premium locked. */

.soa-premium-locked-box {padding:20px; border:1px solid #E1B7CE; background:#E1B7CE22; margin-top:20px;}


/* ===== SOA Diagrams (isolated) ===== */
.soa-diagrams{
  margin-top: 16px;
  margin-bottom:16px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.soa-diagrams-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.soa-diagrams-title{
  font-family: "bell-centennial-std-name-num", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.soa-diagrams-controls{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}

.soa-diagrams-view{
  border: 1px solid rgba(0,0,0,0.16);
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
}

.soa-diagrams-view.is-active{
  border-color: rgba(0,0,0,0.38);
}

.soa-diagrams-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 960px){
  .soa-diagrams-grid{ grid-template-columns: 1fr; }
}

.soa-diagram{
  border: 1px solid rgba(0,0,0,0.06);
  padding: 12px;
}

.soa-diagram-h{
font-family: "bell-centennial-std-name-num", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}


.soa-chart{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #f3f3f3;
  position: relative;
  overflow:hidden;
  max-width: 300px;
  margin: 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.soa-chart-center{
  position: absolute;
  width: 90px;
  height: 90px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.06);
}

.soa-chart-center-num{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.soa-chart-center-lbl{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}

/* Stapel */
.soa-chart--bar{
  border-radius: 14px;
  aspect-ratio: auto;
  height: 44px;
  padding: 8px;
  background: rgba(0,0,0,0.03);
}

.soa-bar{
  height: 100%;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  display:flex;
}

.soa-bar-seg{ height: 100%; }

.soa-bar-seg.is-owned{ background: var(--soa-owned, #6A0DAD); }
.soa-bar-seg.is-controlled{ background: var(--soa-controlled, #D72691); }
.soa-bar-seg.is-competitor{ background: var(--soa-competitor, #E1B7CE); }
.soa-bar-seg.is-other{ background: var(--soa-other, #DCE6F1); }

/* Legend */
.soa-diagrams-legend{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.soa-legend-row{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 16px;
}

.soa-legend-swatch{
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display:inline-block;
}

.soa-legend-swatch.is-owned{ background: var(--soa-owned, #6A0DAD); }
.soa-legend-swatch.is-controlled{ background: var(--soa-controlled, #D72691); }
.soa-legend-swatch.is-competitor{ background: var(--soa-competitor, #E1B7CE); }
.soa-legend-swatch.is-other{ background: var(--soa-other, #DCE6F1); }

.soa-diagrams-note{
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.8;
}
.soa-diagrams-note2{margin-top: 10px; font-size: 13px; opacity: 0.8;}

@media (min-width: 1024px){
  .soa-chart{max-width: 260px;}
  .soa-chart-center{width: 80px; height: 80px;}
}

@media (max-width: 480px){
  .soa-chart{max-width: 260px;}
  .soa-chart-center{width: 80px; height: 80px;}
}

/* Topplistor */

/* Yttre layout: gör alla topplistor flexpotential */
.soa-toplists-wrapper-kn {width: 100%; box-sizing: border-box;padding: 1rem 0; max-width:980px;}

/* Flex-container – WordPress placerar shortcodes som separata block */
.soa-toplists-month {display: flex; flex-wrap: wrap; gap: 3rem;}

/* En kolumn när topplistan har intern layout (tabell + paj) */
.soa-toplists-month article.soa-toplist{
  flex: 1 1 100%;
  margin-bottom: 32px;
}


/* STYLING. */
.soa-toplist-wrapper {background:#fff;}
.soa-toplist__header {font-family: "bell-centennial-std-name-num", sans-serif !important; font-size:20px; padding-left:8px; }
.soa-toplist__month {font-family: "bell-centennial-std-address", sans-serif !important; font-size:16px;}
.soa-toplist-prompt {font-family: "le-monde-sans-std-2", sans-serif; font-size:16px; margin: 6px 0 0 0; color: #555; padding: 0 0 8px 8px;  font-style: italic;}

.soa-scroll {padding:8px 12px 0px; margin-bottom:0px;}
.soa-scroll table.soa-table {font-family: "bell-centennial-std-address", sans-serif !important; margin-bottom:6px; }
.soa-scroll table.soa-table th:last-of-type, .soa-toplist .soa-table td:last-of-type {display:none;}
.soa-scroll table.soa-table th {font-family: "bell-centennial-std-name-num", sans-serif !important; border-bottom: 1px solid #E1B7CE22;}
.soa-scroll table.soa-table th:first-of-type {text-align: left;}
.soa-scroll table.soa-table .__right {text-align: right;}

.soa-col-total {color:#9B59B6; padding-right:10px;}
.soa-col-awareness {color:#817987;}

.soa-toplist__meta {display:inline-block; max-width:440px; padding:8px 12px; border:1px solid #E1B7CE; font-family: "bell-centennial-std-address", sans-serif !important; margin-top:-1px;}

/* Inre layout: tabell + paj bredvid varandra */
.soa-toplist-panels{
  display:flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 8px 12px 12px;
  border: 1px solid #E1B7CE;
  background:#fff;
  align-items: flex-start;
    max-width:980px;
    margin-top:10px;
}

/* Tabell tar gärna mer plats */
.soa-toplist-panel--table{ flex: 1 1 420px; max-width:600px; }

/* Paj får en “fast-ish” kolumn men kan gå ner under vid behov */
.soa-toplist-panel--pie{ flex: 0 1 340px; font-family: "bell-centennial-std-address", sans-serif; }

.soa-toplist-panel--pie .soa-diagram-h {text-align:center; margin-bottom:0px;}
.soa-toplist-panel--pie .soa-diagrams-note{text-align:center; margin-top: 0px; font-size: 14px; opacity: 1.0;}
.soa-toplist-panel--pie .soa-diagrams-note2{text-align:center; margin-top: 10px; font-size: 14px; opacity: 1.0;}
.soa-toplist-panel--pie .soa-chart--pie {margin:10px auto; max-width:160px;}
.soa-toplist-panel--pie .soa-diagrams-legend{justify-content:center; gap:4px 10px;}
.soa-toplist-panel--pie .soa-legend-row {gap: 8px; font-size: 14px; }

/* Topplistor: tunn ytterring för paj (topp 1–3) */
.soa-toplist-panel--pie .soa-chart--pie::after{
  background:
    conic-gradient(
      rgba(0,0,0,0.35) 0 var(--soa-tl-r1-end),
      rgba(0,0,0,0.35) var(--soa-tl-r1-end) var(--soa-tl-r2-end),
      rgba(0,0,0,0.35) var(--soa-tl-r2-end) var(--soa-tl-r3-end),
      transparent var(--soa-tl-r3-end) 100%
    );
}


/* Mobil: stacka */
@media (max-width: 880px){
  .soa-toplist-panels{ flex-direction: column; }
}


/* En kolumn under 880px */
@media (max-width: 880px) {
.soa-toplists-month article.soa-toplist {flex: 1 1 100%; }
}

@media (max-width: 600px) {
.soa-toplist-wrapper table.soa-table th {font-size:14px; line-height:16px;  }
.soa-toplist-wrapper table.soa-table td {font-size:14px;  }
th.soa-col-awareness  {white-space: nowrap;}
    
}