/* Universal box-sizing for easier layout */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Base body styles */
    body {
      margin: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0; /* Fallback background */
      height: 100vh;
      width: 100vw;
    }

    /* To stop weird text-selection/dragging behavior on press: */
    body, svg, svg * {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    /* to completely lock layout*/
    html, body {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
      margin: 0;
      padding: 0;
      touch-action: none;
    }

    /* Common styles for buttons and selects */
    button, select {
      min-width: 44px;
      min-height: 44px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 8px;
      font-size: 16px;
      border-radius: 4px;
      z-index: 1000;
      touch-action: manipulation;
    }

    /* Specific button styles */
    button {
      display: inline-block;
      background-color: #333;
      color: #fff;
      border: none;
      text-align: center;
      user-select: none;
      border-radius: 40%;
      cursor: pointer;
    }

    button:hover {
      background-color: #787878;
    }

    /*
    button:active {
      transform: translateY(2px); 
    }*/

    /* SVG element styling - CRITICAL FIXES */
    svg {
      width: 100vw;
      height: 100vh;
      display: block;
      touch-action: none;
      background-color: #ffffff; /* Ensure white background */
      position: absolute;
      top: 0;
      left: 0;
      /*border: 5px solid red;*/
    }

    /*Disable focus outline from keyboard/mouse*/
    svg * {
      -webkit-tap-highlight-color: transparent;
    }

    svg .clickable:focus {
      outline: none;
    }

    .geo-shape:focus {
      outline: none;
    }

    /* Tooltip styles */
    .tooltip {
      position: absolute;
      background: #333;
      color: #fff;
      padding: 5px 8px;
      border-radius: 4px;
      pointer-events: none;
      font-size: 16px;
      transition: opacity 0.1s ease;
      z-index: 1000;
      user-select: none;
      opacity: 0;
    }

    .tooltip.show {
      opacity: 1;
    }

    /* Category Select specific styles */
    #categorySelect {
      position: absolute; 
      bottom: 10px; 
      right: 10px;
      width: 200px;
      background-color: #333;
      color: #eee;
      direction: rtl;
      cursor: pointer;
      border: 1px solid #555;
    }

    /* Control buttons container */
    .controls {
      position: absolute;
      bottom: 10px;
      left: 40%;
      z-index: 10;
      display: flex;
      gap: 5px;
    }

    /* Media Queries for responsiveness */
    @media (max-width: 1000px) {
      .controls {
        display: none;
      }

      #categorySelect {
        font-size: 18px;
        width: 180px;
      }

      .tooltip {
        font-size: 16px;
        padding: 6px 10px;
      }
    }

    /* Hover highlight styles for SVG elements */
    .hover-highlight-red:hover {
      stroke: #ff0000;
      stroke-width: 2;
    }

    .hover-highlight-grey:hover {
      fill: #e4e4e4ff;
      stroke: rgb(164, 163, 163);
      stroke-width: 1;      
    }

    .hover-highlight-blue:hover {
      fill: #90d8ec;
      stroke: #ff0000;
      stroke-width: 1;       
    }

    .hover-highlight-glow:hover {
      transform: scale(1.1);
      transform-origin: center;
      transition: transform 0.2s;
      stroke: #000;
      fill: #ffa500;
      stroke-width: 2;
    }

    /* Clickable elements */
    .clickable:hover {
      cursor: pointer;
    }

    /* Touch-specific styles */
    .clickable {
      -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }

    /* Non-interactive geo shapes */
    path.geo-shape.non-interactive {
      pointer-events: none;
      opacity: 0.6;
    }

    .svg-logo-container {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1000;
        display: inline-block;
    }

    .svg-logo {
        width: 295px;
        height: auto;
    }

    /* Loading indicator */
    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2000;
      font-size: 18px;
      color: #333;
    }