* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-image: url('1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 20px;
  height: 100vh; 
  display: flex;
  justify-content: center; 
  color: #fff;
}

/* Behållaren (Vertikal stack) - Mer genomskinlig och ljusare glasplatta */
.katalog-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 95%; 
  height: calc(100vh - 40px); 
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  gap: 20px;
}

/* Platsbesparande rullgardinsmeny för navigation med inbyggd avskiljande linje */
.sid-nav {
  flex-shrink: 0;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}

.nav-dropdown {
  padding: 8px 12px;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  outline: none;
}

.nav-dropdown:focus {
  border-color: #d4af37;
}

.nav-dropdown option {
  background: #1a1a1a;
  color: #fff;
}

.hjalptext {
  font-size: 0.85rem;
  color: #ccc;
  margin: -10px 0 10px 0; 
  font-style: italic;
}

.hjalptext strong {
  color: #fff;
  font-weight: 600;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sok-sektion {
  flex-shrink: 0; 
}

/* =========================================
   Kombinerat Sökfält
   ========================================= */
.google-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; 
}

.sok-dropdown {
  padding: 12px;
  font-size: 1.1rem;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  color: #000;
  cursor: pointer;
}

.sok-dropdown:focus {
  outline: none;
  border-color: #d4af37;
}

.google-input {
  flex: 1;
  min-width: 150px;
  padding: 12px;
  font-size: 1.1rem;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  color: #000;
}

.google-input:focus {
  outline: none;
  border-color: #d4af37;
}

.google-knapp {
  padding: 0 20px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2b2208;
  border: 1px solid #b38728;
  border-radius: 4px;
  background: linear-gradient(to bottom, #fcf6ba 0%, #d4af37 40%, #aa771c 100%);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.google-knapp:hover {
  transform: scale(1.02);
  background: linear-gradient(to bottom, #ffffff 0%, #e6c243 40%, #bc8516 100%);
  color: #000;
}

/* =========================================
   Länkarna
   ========================================= */
.lank-sektion {
  flex: 1.5; 
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
  padding-bottom: 20px;
}

.lank-layout {
  display: flex;
  flex-direction: row; 
  flex: 1;
  overflow: hidden;
  gap: 20px; 
}

#lank-lista {
  flex: 1.2; 
  overflow-y: auto;
  padding-right: 10px;
  list-style: none;
  margin: 0;
}

.lank-item {
  margin-bottom: 8px; 
  padding-bottom: 0;
  border-bottom: none; 
}

.lank-url {
  text-decoration: none;
  color: #333;
  display: block;
  white-space: nowrap;     
  overflow: hidden;        
  text-overflow: ellipsis; 
  line-height: 1.2; 
  font-size: 0.95rem; 
  position: relative;
  padding: 10px 30px 10px 15px; 
  border-radius: 8px; 
  transition: background-color 0.2s; 
  background-color: #f1f8ff; 
}

.lank-url:hover {
  background-color: #e1effe;
  color: #0066cc;
}

.lank-url::after {
  content: "›"; 
  position: absolute;
  right: 12px; 
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  color: inherit;
  transition: color 0.2s;
  opacity: 0.5;
}

/* Inforutan */
#beskrivnings-ruta {
  flex: 1; 
  background-color: #f1f8ff;
  border: 1px solid #dcedff;
  border-radius: 8px;
  padding: 15px 20px;
  color: #222;
  height: 100%; 
  overflow-y: auto;  
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
  transition: background-color 0.3s, border-color 0.3s;
}

#beskrivnings-innehall {
  font-size: 1.05rem;
  line-height: 1.5;
}

#beskrivnings-innehall strong {
  display: block;
  margin-bottom: 6px;
  color: #004499;
  font-size: 1.15rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#beskrivnings-innehall .ruta-lank {
  text-decoration: none;
}
#beskrivnings-innehall .ruta-lank:hover strong {
  text-decoration: underline;
  color: #002266;
}

.ruta-extrainfo {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 12px;
  word-break: break-all;
}
.ruta-extrainfo a {
  color: inherit;
  text-decoration: none;
}
.ruta-extrainfo a:hover {
  text-decoration: underline;
  color: #0066cc;
}

.ruta-taggar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.15);
}

.ruta-tagg {
  cursor: pointer;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: lowercase;
  display: inline-block;
  transition: opacity 0.2s;
}

.ruta-tagg:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* =========================================
   Färger (A-Ö)
   ========================================= */
.lank-item[data-bokstav="a"] .lank-url, .tagg[data-bokstav="a"], .ruta-tagg[data-bokstav="a"] { background-color: #ffe4e6; color: #9f1239; }
.lank-item[data-bokstav="a"] .lank-url:hover { background-color: #fecdd3; }
.lank-item[data-bokstav="b"] .lank-url, .tagg[data-bokstav="b"], .ruta-tagg[data-bokstav="b"] { background-color: #ffedd5; color: #9a3412; }
.lank-item[data-bokstav="b"] .lank-url:hover { background-color: #fed7aa; }
.lank-item[data-bokstav="c"] .lank-url, .tagg[data-bokstav="c"], .ruta-tagg[data-bokstav="c"] { background-color: #fef3c7; color: #92400e; }
.lank-item[data-bokstav="c"] .lank-url:hover { background-color: #fde68a; }
.lank-item[data-bokstav="d"] .lank-url, .tagg[data-bokstav="d"], .ruta-tagg[data-bokstav="d"] { background-color: #fef9c3; color: #854d0e; }
.lank-item[data-bokstav="d"] .lank-url:hover { background-color: #fef08a; }
.lank-item[data-bokstav="e"] .lank-url, .tagg[data-bokstav="e"], .ruta-tagg[data-bokstav="e"] { background-color: #ecfccb; color: #3f6212; }
.lank-item[data-bokstav="e"] .lank-url:hover { background-color: #d9f99d; }
.lank-item[data-bokstav="f"] .lank-url, .tagg[data-bokstav="f"], .ruta-tagg[data-bokstav="f"] { background-color: #dcfce7; color: #166534; }
.lank-item[data-bokstav="f"] .lank-url:hover { background-color: #bbf7d0; }
.lank-item[data-bokstav="g"] .lank-url, .tagg[data-bokstav="g"], .ruta-tagg[data-bokstav="g"] { background-color: #d1fae5; color: #065f46; }
.lank-item[data-bokstav="g"] .lank-url:hover { background-color: #a7f3d0; }
.lank-item[data-bokstav="h"] .lank-url, .tagg[data-bokstav="h"], .ruta-tagg[data-bokstav="h"] { background-color: #ccfbf1; color: #115e59; }
.lank-item[data-bokstav="h"] .lank-url:hover { background-color: #99f6e4; }
.lank-item[data-bokstav="i"] .lank-url, .tagg[data-bokstav="i"], .ruta-tagg[data-bokstav="i"] { background-color: #cffafe; color: #155e75; }
.lank-item[data-bokstav="i"] .lank-url:hover { background-color: #a5f3fc; }
.lank-item[data-bokstav="j"] .lank-url, .tagg[data-bokstav="j"], .ruta-tagg[data-bokstav="j"] { background-color: #e0f2fe; color: #075985; }
.lank-item[data-bokstav="j"] .lank-url:hover { background-color: #bae6fd; }
.lank-item[data-bokstav="k"] .lank-url, .tagg[data-bokstav="k"], .ruta-tagg[data-bokstav="k"] { background-color: #dbeafe; color: #1e40af; }
.lank-item[data-bokstav="k"] .lank-url:hover { background-color: #bfdbfe; }
.lank-item[data-bokstav="l"] .lank-url, .tagg[data-bokstav="l"], .ruta-tagg[data-bokstav="l"] { background-color: #e0e7ff; color: #3730a3; }
.lank-item[data-bokstav="l"] .lank-url:hover { background-color: #c7d2fe; }
.lank-item[data-bokstav="m"] .lank-url, .tagg[data-bokstav="m"], .ruta-tagg[data-bokstav="m"] { background-color: #ede9fe; color: #5b21b6; }
.lank-item[data-bokstav="m"] .lank-url:hover { background-color: #ddd6fe; }
.lank-item[data-bokstav="n"] .lank-url, .tagg[data-bokstav="n"], .ruta-tagg[data-bokstav="n"] { background-color: #f3e8ff; color: #6b21a8; }
.lank-item[data-bokstav="n"] .lank-url:hover { background-color: #e9d5ff; }
.lank-item[data-bokstav="o"] .lank-url, .tagg[data-bokstav="o"], .ruta-tagg[data-bokstav="o"] { background-color: #fae8ff; color: #86198f; }
.lank-item[data-bokstav="o"] .lank-url:hover { background-color: #f5d0fe; }
.lank-item[data-bokstav="p"] .lank-url, .tagg[data-bokstav="p"], .ruta-tagg[data-bokstav="p"] { background-color: #fce7f3; color: #9d174d; }
.lank-item[data-bokstav="p"] .lank-url:hover { background-color: #fbcfe8; }
.lank-item[data-bokstav="q"] .lank-url, .tagg[data-bokstav="q"], .ruta-tagg[data-bokstav="q"] { background-color: #ffe4e6; color: #be123c; }
.lank-item[data-bokstav="q"] .lank-url:hover { background-color: #fecdd3; }
.lank-item[data-bokstav="r"] .lank-url, .tagg[data-bokstav="r"], .ruta-tagg[data-bokstav="r"] { background-color: #fce7f3; color: #be185d; }
.lank-item[data-bokstav="r"] .lank-url:hover { background-color: #fbcfe8; }
.lank-item[data-bokstav="s"] .lank-url, .tagg[data-bokstav="s"], .ruta-tagg[data-bokstav="s"] { background-color: #dbeafe; color: #1d4ed8; }
.lank-item[data-bokstav="s"] .lank-url:hover { background-color: #bfdbfe; }
.lank-item[data-bokstav="t"] .lank-url, .tagg[data-bokstav="t"], .ruta-tagg[data-bokstav="t"] { background-color: #ccfbf1; color: #0f766e; }
.lank-item[data-bokstav="t"] .lank-url:hover { background-color: #99f6e4; }
.lank-item[data-bokstav="u"] .lank-url, .tagg[data-bokstav="u"], .ruta-tagg[data-bokstav="u"] { background-color: #ffdfd3; color: #993311; }
.lank-item[data-bokstav="u"] .lank-url:hover { background-color: #ffc4b3; }
.lank-item[data-bokstav="v"] .lank-url, .tagg[data-bokstav="v"], .ruta-tagg[data-bokstav="v"] { background-color: #d0f4de; color: #116633; }
.lank-item[data-bokstav="v"] .lank-url:hover { background-color: #b3ebc9; }
.lank-item[data-bokstav="w"] .lank-url, .tagg[data-bokstav="w"], .ruta-tagg[data-bokstav="w"] { background-color: #cceeff; color: #005588; }
.lank-item[data-bokstav="w"] .lank-url:hover { background-color: #aaddff; }
.lank-item[data-bokstav="x"] .lank-url, .tagg[data-bokstav="x"], .ruta-tagg[data-bokstav="x"] { background-color: #e6e6fa; color: #4b0082; }
.lank-item[data-bokstav="x"] .lank-url:hover { background-color: #d8d8f0; }
.lank-item[data-bokstav="y"] .lank-url, .tagg[data-bokstav="y"], .ruta-tagg[data-bokstav="y"] { background-color: #ffdab9; color: #8b4500; }
.lank-item[data-bokstav="y"] .lank-url:hover { background-color: #ffcba4; }
.lank-item[data-bokstav="z"] .lank-url, .tagg[data-bokstav="z"], .ruta-tagg[data-bokstav="z"] { background-color: #d4fced; color: #0f5c43; }
.lank-item[data-bokstav="z"] .lank-url:hover { background-color: #b5f5dd; }
.lank-item[data-bokstav="å"] .lank-url, .tagg[data-bokstav="å"], .ruta-tagg[data-bokstav="å"] { background-color: #ffe6e6; color: #b30000; }
.lank-item[data-bokstav="å"] .lank-url:hover { background-color: #ffcccc; }
.lank-item[data-bokstav="ä"] .lank-url, .tagg[data-bokstav="ä"], .ruta-tagg[data-bokstav="ä"] { background-color: #f0e6d2; color: #664d00; }
.lank-item[data-bokstav="ä"] .lank-url:hover { background-color: #e6d9b3; }
.lank-item[data-bokstav="ö"] .lank-url, .tagg[data-bokstav="ö"], .ruta-tagg[data-bokstav="ö"] { background-color: #f0d9e6; color: #66004d; }
.lank-item[data-bokstav="ö"] .lank-url:hover { background-color: #e6cce0; }

#beskrivnings-ruta.farg-a { background-color: #ffe4e6; border-color: #fecdd3; }
#beskrivnings-ruta.farg-b { background-color: #ffedd5; border-color: #fed7aa; }
#beskrivnings-ruta.farg-c { background-color: #fef3c7; border-color: #fde68a; }
#beskrivnings-ruta.farg-d { background-color: #fef9c3; border-color: #fef08a; }
#beskrivnings-ruta.farg-e { background-color: #ecfccb; border-color: #d9f99d; }
#beskrivnings-ruta.farg-f { background-color: #dcfce7; border-color: #bbf7d0; }
#beskrivnings-ruta.farg-g { background-color: #d1fae5; border-color: #a7f3d0; }
#beskrivnings-ruta.farg-h { background-color: #ccfbf1; border-color: #99f6e4; }
#beskrivnings-ruta.farg-i { background-color: #cffafe; border-color: #a5f3fc; }
#beskrivnings-ruta.farg-j { background-color: #e0f2fe; border-color: #bae6fd; }
#beskrivnings-ruta.farg-k { background-color: #dbeafe; border-color: #bfdbfe; }
#beskrivnings-ruta.farg-l { background-color: #e0e7ff; border-color: #c7d2fe; }
#beskrivnings-ruta.farg-m { background-color: #ede9fe; border-color: #ddd6fe; }
#beskrivnings-ruta.farg-n { background-color: #f3e8ff; border-color: #e9d5ff; }
#beskrivnings-ruta.farg-o { background-color: #fae8ff; border-color: #f5d0fe; }
#beskrivnings-ruta.farg-p { background-color: #fce7f3; border-color: #fbcfe8; }
#beskrivnings-ruta.farg-q { background-color: #ffe4e6; border-color: #fecdd3; }
#beskrivnings-ruta.farg-r { background-color: #fce7f3; border-color: #fbcfe8; }
#beskrivnings-ruta.farg-s { background-color: #dbeafe; border-color: #bfdbfe; }
#beskrivnings-ruta.farg-t { background-color: #ccfbf1; border-color: #99f6e4; }
#beskrivnings-ruta.farg-u { background-color: #ffdfd3; border-color: #ffc4b3; }
#beskrivnings-ruta.farg-v { background-color: #d0f4de; border-color: #b3ebc9; }
#beskrivnings-ruta.farg-w { background-color: #cceeff; border-color: #aaddff; }
#beskrivnings-ruta.farg-x { background-color: #e6e6fa; border-color: #d8d8f0; }
#beskrivnings-ruta.farg-y { background-color: #ffdab9; border-color: #ffcba4; }
#beskrivnings-ruta.farg-z { background-color: #d4fced; border-color: #b5f5dd; }
#beskrivnings-ruta.farg-å { background-color: #ffe6e6; border-color: #ffcccc; }
#beskrivnings-ruta.farg-ä { background-color: #f0e6d2; border-color: #e6d9b3; }
#beskrivnings-ruta.farg-ö { background-color: #f0d9e6; border-color: #e6cce0; }

/* =========================================
   Taggarna
   ========================================= */
.tagg-sektion {
  flex: 1; 
  overflow-y: auto; 
  padding-right: 10px;
}

#tagg-lista {
  display: flex;
  flex-wrap: wrap;         
  gap: 8px;                
}

.tagg {
  cursor: pointer;
  text-transform: lowercase; 
  margin-bottom: 0;        
  padding: 4px 10px;       
  border-radius: 15px;     
  font-size: 0.75em;       
  transition: opacity 0.2s;
  display: inline-block;
}

.tagg:hover {
  opacity: 0.8;
  text-decoration: none;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

@media (max-width: 768px) {
  body { padding: 0; }
  .katalog-container { height: 100vh; max-width: 100%; border-radius: 0; }
  .lank-layout { flex-direction: column; }
  #beskrivnings-ruta { height: 110px; }
}