.marina { margin-bottom: 40px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
    .hidden-gem { background: #f0f7ff; padding: 15px; border-left: 4px solid #3a7ca5; margin: 15px 0; }
    .review { background: #f9f9f9; padding: 10px; margin: 10px 0; border-left: 3px solid #ddd; }
    .keyword-highlight { color: #2a5885; font-weight: bold; }
    .footer-section { background: #fafafa; padding: 10px; margin-top: 20px; border-left: 3px solid #ccc; }
    .footer-section h4 { margin-bottom: 5px; }
    .photo-credit { font-size: 0.75em; color: #999; margin-top: 5px; }

    nav.navbar {
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 9999;
      transition: top 0.3s ease-in-out;
    }

    #output {
      font-family: monospace;
      white-space: pre;
      margin-top: 1em;
      border: 1px solid #ccc;
      padding: 10px;
      width: fit-content;
    }
    .line {
      display: block;
      width: 100%;
    }

    /* ✅ Center the splitflap area without breaking multi-rows */
    #splitflap-container {
      width: 100%;
      max-width: 1000px;   /* tweak as you like (e.g., 900px) */
      margin: 0 auto;      /* centers the container */
      overflow-x: hidden;  /* keep your original behavior */
      text-align: center;  /* helpful if any text fallback appears */
    }
    .empty-splitflap {
      max-width: 100%;
      overflow: hidden;
      margin-left: auto;   /* center each row if it renders narrower than container */
      margin-right: auto;
    }
    .empty-splitflap canvas,
    .empty-splitflap img {
      max-width: 100% !important;
      height: auto !important;
      display: block;
    }

    .flippin_buttons button{
      min-width:75px;
    }
    .rate_location{
      cursor: pointer;
    }
    .bar-chart {
      max-width: 300px;
      margin-left: 40px;
      display: none;
    }
    .bg {
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .bar {
      height: 10px; /* Adjust height as needed */
      position: relative; /* Required for absolute positioning */
      border-radius: 4px;
      background-color: #fbbc04;  
      color: black;
      margin-bottom:7px;  
    }
    .bar_none {
      height: 10px; /* Adjust height as needed */
      position: relative; /* Required for absolute positioning */
      border-radius: 4px;
      color: black;
      margin-bottom:7px;  
    }
    .average-rating-container {
      text-align: center;
      margin-bottom: 20px; /* Adjust this value for more/less space */
      padding: 10px 0;
      font-size: 1.2em;
      font-weight: bold;
      max-width: 400px;   /* tweak as you like (e.g., 900px) */
      margin: 0 auto;      /* centers the container */
      overflow-x: hidden;  /* keep your original behavior */
      text-align: center;  /* helpful if any text fallback appears */
    }

    .help-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Mobile-friendly tooltip styles */
  .rate_flippin_message {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .rate_location .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    pointer-events: none;
  }
  
  /* Show tooltip on hover AND touch for mobile */
  .rate_location:hover .tooltip,
  .rate_location:active .tooltip,
  .rate_location:focus .tooltip {
    visibility: visible;
    opacity: 1;
  }
  
  /* Tooltip arrow */
  .rate_location .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }
  .navbar {
    z-index: 1000 !important;
  }