@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
:root{
  --cs-font-ui:'Titillium Web',sans-serif;
  --btn-w: 50px;     
  --navbar-height: var(--cn-actual-height, 79px); /* Fallback if common var not loaded */
  --navbar-height-mobile: var(--cn-actual-height-mobile, 60px);     
}

/* Basic Reset (if not using a separate globals.css or if it's insufficient) */
html, body, div, main, footer, header, ul, li, button, input, span, img, svg, p, h2, h3 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit; /* Inherit font from body */
}

html {
  height: 100%; /* Crucial for full-height layout */
}

body {
  font-family: var(--cs-font-ui), 'Poppins', sans-serif;
  background-color: #fefaf5;
  color: #333;
  height: 100%; /* Full viewport height */
  overflow: hidden; /* Prevent scrolling on the entire page */
  display: flex;
  flex-direction: column; /* Stack header and content-wrapper vertically */
  padding-top: var(--navbar-height); /* Offset for the fixed common navbar */
}

/* New wrapper for all content below the header */
.map-page-container {
  flex-grow: 1; /* Takes up all available vertical space after body's padding-top */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent internal content from causing scroll on this wrapper */
  min-height: 0; /* Fix for flex children sometimes overflowing */
}

main.map-main-content {
  flex-grow: 1; /* Main content area (map) takes up most of the space */
  position: relative; 
  display: flex; /* To make mapContainer a flex item */
  overflow: hidden; 
  min-height: 0; /* Fix for flex children */
}



/* User-manual button */
#manualFloatBtn {
  position: absolute;
  bottom: 32.5px;
  right: 290px;
  width: var(--btn-w);
  height: var(--btn-w);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff2c7, #ffe4a1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  color: #333;
  cursor: pointer;
  z-index: 10050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#manualFloatBtn:hover {
  transform: scale(1.05);
  background-color: #ffdf9e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Inner icon */
#manualFloatBtn .help-icon {
  font-size: 1.3rem;
  color: #c93030; /* bright red */
  line-height: 1;
  margin-bottom: 2px;
}

/* Label below icon */
#manualFloatBtn .help-label {
  font-weight: 600;
  font-size: 0.7rem;
  color: #333;
}

/* When manual is open */
#manualFloatBtn.active {
  background: linear-gradient(135deg, #ffd77b, #ffc964);
  animation: pulseManual 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(255, 197, 89, 0.55);
}


@keyframes pulseManual {
  0% { box-shadow: 0 0 0 2px rgba(255, 200, 100, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255, 180, 60, 0.3); }
  100% { box-shadow: 0 0 0 2px rgba(255, 200, 100, 0.6); }
}


/* ─── User-manual dropdown ───────────────────────────── */
#userManualPanel{
  position:fixed;      /* over the map, not pushing layout */
  top:160px;            /* just below header */
  right:180px;
  width:500px;max-width:90%;
  max-height:55vh;overflow:auto;
  background:#fff9ec3a;
  border:2px solid #ffd77b;
  border-radius:12px;
  padding:1rem 1.5rem;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  z-index:10050;
  display:block;        /* visible on first load */
  animation:fadeInManual .25s ease;
  font-size: 0.95rem;
  line-height: 1.55;
  backdrop-filter: blur(8px);
}
/* close (“×”) button */
#userManualPanel .close-btn{
  position:absolute;top:8px;right:12px;
  background:none;border:none;
  font-size:18px;font-weight:700;cursor:pointer;
  color:#c56322;transition:color .2s;
}
#userManualPanel .close-btn:hover{color:#ff7d29;}
#userManualPanel h3{
  font-size:1.2rem;
  margin-bottom:.6rem;
  color:#c56322;
}
#userManualPanel ul{
  list-style:disc; padding-left:1.2rem;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}
#userManualPanel li{
  padding-left: 0.25rem;
  margin-bottom: 0.6rem;
}

/* subtle fade-down */
@keyframes fadeInManual{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}


.manual-button.active {
  box-shadow: 0 0 10px 2px #ffd77b88;
  animation: pulseGlow 1.5s ease-in-out infinite;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 6px 2px #ffd77b80; }
  50% { box-shadow: 0 0 12px 4px #ffc577; }
  100% { box-shadow: 0 0 6px 2px #ffd77b80; }
}

/* Map container */
#mapContainer {
  flex-grow: 1; /* Map itself takes all available space in main.map-main-content */
  position: relative;  /* crucial for absolutely positioned children */
  width: 100%;
  border-top: 2px solid #f4c27a;
  border-bottom: 2px solid #f4c27a;
  z-index: 1;
}

/* ── 5-second hero card ─────────────────────────────── */
#heroCard{
  position:fixed;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width: clamp(260px, 60vw, 380px);
  background:#ffffffeb; 
  border:2px solid #ffd77b;
  border-radius:14px;
  padding:18px 24px 20px;
  text-align:center;
  z-index:12000; /* High z-index to be on top */
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  font-family:'Titillium Web',sans-serif;
}
#heroCard h2{
  font:700 22px/1.25 'Titillium Web',sans-serif;
  color:#c56322;
  margin:0 0 8px;
}
#heroCard p{font:500 14px/1.35 'Poppins',sans-serif;color:#444;}

/* Ensure these keyframes are present */
@keyframes heroSlideIn{
  from{opacity:0;transform:translate(-50%,-65%) scale(.9)}
  to {opacity:1; transform:translate(-50%,-50%) scale(1)} 
}

@keyframes heroFadeOut{
  to{opacity:0;transform:translate(-50%,-50%) scale(.96);
     pointer-events:none; 
  }
}


/* The sidebar on the left, only as tall as #mapContainer */
#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px; 
  height: 100%;
  /* Define the primary translucent background for the entire sidebar here */
  background-color: rgba(255, 255, 255, 0.527); /* Adjust opacity as desired */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 3px 0 6px rgba(0,0,0,0.15);
  overflow: hidden; 
  z-index: 9999;
  padding: 0; 
  display: block; 
  transition: transform 0.3s ease;
}

/* Ensure #sidebar-scroll handles its own background for content if different from #sidebar */
#sidebar-scroll {
  height: 100%; 
  overflow-y: auto;
  padding: 1rem; /* Main padding for content */
  padding-top: 0; /* Remove top padding, header will manage its own and stick */
  position: relative; /* For sticky header positioning context */
}
/* Sidebar closed: slide it off-screen to the left by its width (400px) */
.sidebar.closed {
  transform: translateX(-400px);
}
/* Sidebar open: fully visible (no horizontal offset) */
.sidebar.open {
  transform: translateX(0);
}
.sidebar-control {
  position: absolute;
  z-index: 10001; /* Ensure it stays above the map and sidebar */
  top: 50%;
  transform: translateY(-50%);
  
  /* Rectangular shape */
  width: 30px;
  height: 180px;
  
  background-color: #fdd49ec2;
  box-shadow: 3px 0 6px rgba(0,0,0,0.3);
  color: #fff;
  font-size: 3rem;         /* Large arrow size */
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  /* Rounding on the right side to soften the edge */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;

  /* We’ll move this with JS from left=0 to left=400px */
  transition: left 0.3s ease;
  /* Start with it at the far left edge (matching “closed” sidebar) */
  left: 0;
}
.sidebar-control:hover {
  background-color: #ffb35073;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

#sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  position: sticky; 
  top: 0; /* Stick to the top of #sidebar-scroll */
  z-index: 10; 

  /* Make header background match #sidebar */
  background-color: inherit; /* Try to inherit from #sidebar via #sidebar-scroll */
  
  /* Padding for the header content itself, within the sticky container */
  padding-top: 1rem;    /* Space above title/button */
  padding-bottom: 0.75rem; /* Space below title/button before border */
  /* Horizontal padding is now handled by #sidebar-scroll for the whole content block */
  margin-left: -1rem;  /* Span the padding of #sidebar-scroll */
  margin-right: -1rem; /* Span the padding of #sidebar-scroll */
  padding-left: 1rem;  /* Re-apply internal padding */
  padding-right: 1rem; /* Re-apply internal padding */
}

#sidebar-back-button {
  background: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #555;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  padding: 0;
  flex-shrink: 0; /* Prevent button from shrinking */
}

#sidebar-back-button:hover {
  background-color: #f0f0f0;
  border-color: #aaa;
  color: #333;
}

#sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue, #336699); /* Use a theme color */
  margin: 0;
  flex-grow: 1; /* Allow title to take available space */
  line-height: 1.2;
}

/* In the #search-results li a styles section, or a new dedicated section */
#search-results li.is-heritage-site a {
  /* color: #8c5c00; /* Darker, richer gold for heritage links */
  /* font-weight: 600; */ /* Make heritage links bolder */
}

#search-results li .heritage-indicator {
  font-size: 0.9em; /* Adjust as needed */
  color: var(--primary-yellow, #ffd77b); /* Use your theme's gold/yellow */
  margin-right: 0.3em;
  /* Consider using a specific icon instead of text if preferred */
  /* content: '🌟'; /* Example: Star emoji */
}

#search-results li.is-heritage-site {
    background-color: #fff9e6; /* Light yellow background for heritage items */
    border-left: 3px solid var(--primary-yellow, #ffd77b); /* Accent border */
    padding-left: 0.7rem; /* Adjust padding to accommodate border */
}

#search-results li.is-heritage-site:hover {
    background-color: #fff2c7; /* Slightly darker yellow on hover */
}

#search-results ul, 
#search-results li {
  list-style: none;
  margin-left: 0; 
  padding-left: 0; 
}
.search-result-basic-info { /* For non-heritage Nominatim results */
    font-size: 0.9rem;
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    color: #444;
}
.search-result-basic-info strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #333;
}

#search-results li.match-type-id .heritage-indicator::after {
    content: " (ID)";
    font-size: 0.8em;
    color: #666;
}
#search-results li.match-type-name-proximity .heritage-indicator::after {
    content: " (Nearby)";
    font-size: 0.8em;
    color: #666;
}

#search-results li.search-error {
    padding: 0.75rem;
    font-style: normal; /* Override italic if button is present */
    color: #555;
    text-align: center;
    border-bottom: none; /* No border for error/message items */
}


.search-bar {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1rem;
  align-items: center;
}
/* Search Input */
#searchInput {
  flex: 1;
  padding: 0.5rem 0.8rem;
  height: 2.5rem;
  width: 80%;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  outline: none;
}
#searchInput:focus {
  border-color: #ff9f5e; /* highlight color */
}
/* Search Button & Clear Button */
#searchBtn,
#clearBtn {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #fdd49ec2;
  color: #fff;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.1s ease;
  padding: 0;
  position: relative;
}
/* Tooltip for search and clear buttons */
#searchBtn::after,
#clearBtn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 110%;  /* Place the tooltip above the button */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 0.8rem;
  font-family: 'Poppins', sans-serif;
  z-index: 100;
}
/* Optional arrow for search and clear tooltips */
#searchBtn::before,
#clearBtn::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 100;
}
/* Show tooltips on hover */
#searchBtn:hover::after,
#clearBtn:hover::after,
#searchBtn:hover::before,
#clearBtn:hover::before {
  opacity: 1;
}
/* The search results listing */
#search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}
#search-results li {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #ececec;
  padding-bottom: 0.5rem;
  transition: background-color 0.2s ease;
}
#search-results li:hover {
  background-color: #c4c4c4; /* a slightly darker gray on hover */
  cursor: pointer;
}
/* Each link + sub-info in search results */
#search-results li a {
  color: #6e4429; /* typical link color */
  text-decoration: none;
  font-weight: 500;
}
#search-results li a:hover {
  /*text-decoration: underline; */
  color: #b36d42; 
}
.search-result-type {
  font-size: 0.85rem;
  color: #a3653c;
  margin-top: 4px;
}

/* Legend box */
#legendBox {
  position: absolute;
  bottom: 100px;
  right: 20px;
  width: 150px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  font-size: 0.85rem;
  z-index: 10000;
  overflow: hidden; /* to keep border radius consistent */
}
.legend-title {
  background-color: #fdd49ec2; /* yellowish title */
  padding: 0.5rem;
  font-weight: 600;
  background: #fdd49ec2; /* translucent background like viewControl */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.legend-title:hover {
  background-color: #ffc983c2; /* a light gray background on hover */
  cursor: pointer;
}
.legend-list {
  background-color: #ffffffc4; /* white body */
  padding: 0.5rem;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 1px; /* add some padding for a nicer hover background */
  transition: background-color 0.2s ease;
}
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 0.5rem;
  border: 1px solid #333;
}
.legend-item:hover {
  background-color: #d2d2d2; /* a light gray background on hover */
  cursor: pointer;
}


/* ─── Rotation buttons: glass-look + gradient outline ───────────── */
#rotationControl{
  /* give the holder the same glass panel style */
  position: absolute;
  bottom: 25px;
  right: 20px; 
  z-index: 10000;
  display: flex;
  gap: 6px; /* small space between two buttons */
  border-radius: 8px;
  box-shadow: 0 4 12px rgba(0,0,0,0.2);
  padding: 0.5rem;
  color: #c56322;
  background: #fdd49e34; /* translucent background like viewControl */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#rotationControl button {           /* width like viewControl */
  width: var(--btn-w);
  height: var(--btn-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 204, 159, 0); /* translucent background like viewControl */
  border-radius: 10px;
  color: #3a3a3a;
  font-size: 1.6rem;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
}
/* Hover lift and tint */
#rotationControl button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.10);
}
/* Animated gradient outline */
#rotationControl button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(130deg, #ffa95f, #ff7d29, #ffa95f);
  mask:
    linear-gradient(#0000 0 0) content-box,
    linear-gradient(#0000 0 0);
  -webkit-mask:
    linear-gradient(#0000 0 0) content-box,
    linear-gradient(#0000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  background-size: 300% 300%;
  pointer-events: none;
}
/* Show animated outline on hover */
#rotationControl button:hover::before {
  opacity: 1;
  animation: gradientSlide 3s linear infinite;
}
/* optional: keyboard focus for accessibility */
#rotationControl button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,183,102,.6);
}


/* View control buttons */
#viewControl {
  position:absolute;
  bottom:25px;
  right:150px;
  z-index:10000;
  display:flex;
  gap:6px;
  border-radius: 8px;
  box-shadow: 0 4 12px rgba(0,0,0,0.2);
  padding: 0.5rem;
  color: #c56322;
  background: #fdd49e34; /* translucent background like viewControl */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* passive state */
#viewControl button img{
  width:30px;
  height:30px;
  opacity:.75;
  transition:opacity .25s ease;
}
#viewControl button{
  flex :1; /* fill available space */
  width:var(--btn-w);
  height:var(--btn-w);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  background:transparent;
  border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease, background .3s ease;
  flex-direction: column;   /* ← stack vertically */
}

#viewControl button.active {
  background: linear-gradient(135deg, #ffe6b0, #ffd180);
  color: #b45200;
  animation: pulseGlow 2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(255, 197, 89, 0.45);
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 2px rgba(255, 200, 100, 0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(255, 170, 50, 0.25); }
  100% { box-shadow: 0 0 0 2px rgba(255, 200, 100, 0.5); }
}

/* active visual */
#viewControl button.active img{ 
  opacity: 1;
  filter: drop-shadow(0 0 1px #ffb347);
}
/* hover bump (both active & inactive) */
#viewControl button:hover{
  transform:translateY(-2px);
}

/* Tooltip styling using the ::after pseudo-element */
#viewControl button::after {
  content: attr(data-tooltip); /* Pulls the tooltip text from the data-tooltip attribute */
  position: absolute;
  bottom: 110%; /* Positions the tooltip above the button */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;              /* Tooltip text color */
  padding: 4px 8px;
  border-radius: 4px;

  white-space: pre-line;
  max-width: 250px;
  width: max-content;
  text-align: center;
  box-sizing: border-box;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  
  /* Customize font appearance */
  font-size: 0.8rem;        /* Change font size */
  font-family: 'Titillium Web',sans-serif; /* Set font family */
  font-style: normal;       /* You can also set italic, bold, etc. */
  z-index: 100;             /* Ensure tooltip appears on top */
}

#viewControl button::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: box-shadow 0.3s ease, background 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
/* Hover effect */
#viewControl button:hover::before{
  box-shadow: 0 0 8px rgba(255, 230, 170, 0.4);
  background: rgba(255, 255, 255, 0.15);
}
@keyframes gradientSlide{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
/* Show tooltip when hovering over the button */
#viewControl button:hover::after{
  opacity: 1;
}
/* Text label inside view control button */
.view-btn-label {
  margin-top: 2px;
  font-size: 0.65rem;      /* small text */
  font-weight: 500;
  font-family: 'Titillium Web',sans-serif;
  color: #333;             /* dark gray text */
  text-align: center;
  line-height: 1;
  pointer-events: none;    /* ensures clicking the text still clicks button */
}

/* Footer */
footer {
  background-color: #ffd77b;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* Feature style*/
.feature-card {
  background: rgba(255, 255, 255, 0.8); /* 半透明背景，适合地图 */
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 柔和阴影 */
  font-family: 'Segoe UI', sans-serif;
  color: #444;
}

.feature-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 14px;
  color: #336699; /* 主色调蓝 */
}

.feature-row {
  margin-bottom: 12px;
}

.feature-label {
  font-size: 17px;
  font-weight: bold;
  color: #336699;
  margin-bottom: 4px;
}

.feature-value {
  font-size: 14px;
  font-weight: normal;
  color: #787676; /* 奶白色字体 */
}

.feature-divider {
  border: none;
  border-top: 1px dashed rgba(0, 0, 0, 0.05); /* 非常浅的灰色虚线 */
  margin: 10px 0;
}

.feature-error {
  color: #aa0000;
  font-style: italic;
}


/* Styles for "Plan Route" button in Map Sidebar */
.feature-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0; /* Softer border */
  display: flex;
  justify-content: center; /* Center the button */
}

.btn-action-routeplanner {
  background: linear-gradient(90deg, var(--secondary-yellow, #ffe4a1), var(--primary-yellow, #ffd77b));
  color: var(--text-dark, #333);
  border: none;
  padding: 0.7rem 1.2rem; /* Slightly more padding */
  border-radius: 8px; /* Consistent with other buttons */
  font-size: 0.95rem; /* Slightly larger for clarity */
  font-weight: 600;
  font-family: var(--cs-font-ui, 'Titillium Web', sans-serif);
  cursor: pointer;
  transition: all 0.25s ease; /* Smooth transition for hover */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* Softer shadow */
}

.btn-action-routeplanner:hover {
  background: linear-gradient(90deg, var(--primary-yellow, #ffd77b), var(--secondary-yellow, #ffe4a1));
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
  transform: translateY(-2px); /* Lift effect */
}

.btn-action-routeplanner:active {
  transform: translateY(0px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-action-routeplanner svg {
  /* Tabler icons usually align well, adjust if needed */
  stroke-width: 2; /* Ensure icon weight is good */
}


/* Styles for Data Source Attribution in Map Sidebar Feature Card */
.feature-data-source-attribution {
    margin-top: 1rem; /* Space above the attribution block */
    padding-top: 0.5rem; /* Additional space if no <hr> is used above it inside */
}

.feature-data-source-attribution p {
    font-size: 0.75rem; /* Smaller, more subtle text */
    color: #555;      /* A slightly lighter shade of dark grey */
    line-height: 1.5;
    font-style: italic; /* Common for attributions */
    margin-bottom: 0;  /* Remove default p margin if it's the last child */
}

.feature-data-source-attribution strong {
    font-weight: 600; /* Make "Site Information Source:" bold */
    font-style: normal; /* Reset italic for the strong tag if p is italic */
    color: #444;
}

.feature-data-source-attribution a {
    color: var(--primary-blue, #336699); /* Use your link color */
    text-decoration: underline;
}
.feature-data-source-attribution a:hover {
    color: #b36d42; /* JomKL Orange for hover */
}

/* Styling for the <hr> within the attribution block if you use it consistently */
.feature-data-source-attribution .feature-divider {
    margin-top: 0; /* Adjust if it's directly after the plan route button */
    margin-bottom: 0.75rem; /* Space between divider and attribution text */
    border-top: 1px dashed #ccc; /* Lighter, dashed divider */
}


/* Add this to your existing styles */
.link-button {
  background: none;
  border: none;
  color: var(--primary-blue);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25em 0.5em;
  font-size: 0.9em; /* Relative to parent */
  margin-left: 0.5em;
}
.link-button:hover {
  color: var(--accent-orange);
}