:root {
      --bg: #e9e9e9;
      --panel: rgba(255,255,255,0.98);
      --border: rgba(0,0,0,0.12);
      --text: #1c1c1c;
      --muted: #6b7280;
      --shadow: 0 12px 34px rgba(0,0,0,0.18);

      --blue: #6a97d9;
      --red: #d50000;
      --brown: #b78585;

      --radius: 3px;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      background: #fff;
      color: var(--text);
      font-family: Arial, sans-serif;
    }

    .infographic {
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }

    .map-shell {
      position: relative;
      width: 100%;
      aspect-ratio: 10 / 10;
      background: var(--bg);
      border-radius: 3px;
      overflow: hidden;
    }

    .map-base {
      position: absolute;
      inset: 0;
      background: center / cover no-repeat url("./assets/hormuz-map.svg");
      background-position: right center;
      background-color: #ccefff;
      z-index: 1;
    }

    .map-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .map-lines path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
 


    .pipeline-blue {
      stroke: var(--blue);
      stroke-width: 3px;
    }

    .pipeline-red {
      stroke: var(--red);
      stroke-width:3px;
    }

    .route-blue {
      stroke: var(--blue);
      stroke-width: 3px;
    }



 
.pipeline-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;

stroke-dasharray: 1.2 3.2;
  stroke-dashoffset: 0;
  animation: flow 3s linear infinite;
  opacity: 0.95;
}

.pipeline-flow-blue {
  stroke: #1b69bf;
  stroke-width:  3px;
}

.pipeline-flow-red {
  stroke: #dd9494;
  stroke-width:  3px;
}

.faint {
  opacity: 0.45;
  stroke-dasharray: 0.35 2.8;
}

.pipeline-flow.slow {
  animation-duration: 4s;
}

.pipeline-flow.fast {
  animation-duration: 1.6s;
}

.pipeline-flow.reverse {
  animation-direction: reverse;
}

@keyframes flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -20;
  }
}




    .poi-layer {
      position: absolute;
      inset: 0;
      z-index: 3;
    }

    .poi {
       position: absolute;
      left: auto;
      transform: translate(50%, -50%);
      width: 20px;
      height: 20px;
      cursor: pointer;filter: brightness(0.8) contrast(2);
    }

    .poi .title {
    position: absolute;display: inline-block;
    top: 0;white-space: nowrap;
    left: 125%;     } 

    .map-titulek  {
       position: absolute;
      left: auto;
 
      text-align: center;
      cursor: pointer;
      display: inline-block;
    }

    .poi.is-hidden {
      display: none;
    }

    .poi__hit {
      position: absolute;
      inset: 0;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
    }

    .poi__hit:focus-visible {
      outline: 2px solid #111;
      outline-offset: 2px;
      border-radius: 8px;
    }

    /* Ikonky si pak klidně vyměň za svoje */
    .terminal {
      background: center / contain no-repeat url("./assets/icon-terminal.svg");
    }

    .oilfield {
      background: center / contain no-repeat url("./assets/icon-oilfield.svg");
    }

    .oil {
      background: center / contain no-repeat url("./assets/icon-drop.svg");
    }

    .point {
      width: 16px;
      height: 16px;
      background: var(--brown);
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .poi:hover {
      transform: translate(50%, -50%) scale(1.08);
    }

    .poi__content {
      display: none;
    }

    .sipka {
         
    color: #0069cf;
     
    position: absolute;
    }

    .popup {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
      background: rgba(0,0,0,0.42);
      padding: 18px;
    }

    .popup.active {
      display: flex;
    }

    .popup__content {
      position: relative;
      width: min(420px, calc(100vw - 32px));
      max-height: min(80vh, 820px);
      overflow: auto;
      background: rgba(255,255,255,0.75);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:  6px;
    }

    .popup__close {
 position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    border-radius: 999px;
    color: var(--red);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    }

    .popup__inner h3 {
      margin: 0 28px 8px 0;
      font-size: 22px;
      line-height: 1.15;
    }

    .popup__inner p {
      margin: 0 0 10px;
      font-size: 16px;
      font-family: 'Barlow';
      line-height: 1.5;
      font-weight: 400;
    }

    .popup__inner a {
      color: #1b69bf;
    }

    .popup__inner img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 10px;
      margin-top: 12px;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 3px;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
    }

    .toggle[aria-pressed="false"] {
      opacity: 0.42;
    }

    .toggle__icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      flex: 0 0 18px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;filter: brightness(0.8) contrast(2);
    }

    .toggle__icon--terminal {
      background-image: url("./assets/icon-terminal.svg");
    }

    .toggle__icon--oilfield {
      background-image: url("./assets/icon-oilfield.svg");
    }

    .toggle__icon--oil {
      background-image: url("./assets/icon-drop.svg");
    }

    .toggle__icon--point {
      background: var(--brown);
      border-radius: 50%;
    }

    .map-info {
    position: absolute;
    padding: 5px;
    border: 1px solid #d3d3d3;
    background: #fff;
    font-size: 14px;
    max-width: 70%;
    bottom: 20px;
    left: 20px;
    border-radius: 3px;
    z-index: 7;
}

    @media (max-width: 720px) {
 

      .point {
        width: 14px;
        height: 14px;
      }

      .popup__content {
        width: min(94vw, 420px);
      }

      .controls {
        gap: 8px;
      }

      .toggle {
        font-size: 13px;
      }
    }   
    
    
    @media (max-width: 500px) {
     .map-info {
     
    padding: 5px;
     
    font-size: 12px;
    
}

      .map-titulek {
 
    font-size: 9px;
    line-height: 10px;
    
}
.popup__inner p {
 
    font-size: 13px;
    font-family: 'Barlow';
    line-height: 1.2;
     
}

.poi .title {
  
    font-size: 9px;
    line-height: 12px;
    
     
}





.poi {
   
    width: 15px;
    height: 15px;
 margin-top: 4px;
}

#poi-oil-4 .poi {
  margin-left: -3px;
}
.sipka {
    margin-top: -6px;
    font-size: 12px;
    
}

.popup__inner h3 {
    margin: 6px 28px 3px 0;
    font-size: 16px;
    line-height: 1.15;
}




    .pipeline-blue {
 
      stroke-width: 1px;
    }

    .pipeline-red {
     
      stroke-width:1px;
    }

    .route-blue {
   
      stroke-width: 1px;
    }
 

.pipeline-flow-blue {
 
  stroke-width:  1px;
}

.pipeline-flow-red {
 
  stroke-width:  1px;
}


}