.paddlepoint_trail { width:100%; padding:5px;}
.paddlepoint_trail:hover {background-color:#f0f0f0; cursor: pointer;}
.paddlepoint_trail .trail_name {font-weight: 600;}


#paddlespoints_trail_builder {width:100%;}
#trail_map {width:100%; height: 800px;}

#paddlepoint_controls {height: 800px; overflow-y: scroll;}
.paddlepoint_control {border: solid 1px gray; border-radius: 5px;  padding:10px;margin-bottom: 10px;}
.paddlepoint_control:hover {cursor:pointer; background-color: #f0f0f0;}
.paddlepoint_control .paddlepoint_label img {width:25px; height:25px; margin-right:10px;}
.paddlepoint_control .description {max-height: 150px; overflow-x: scroll;}
.paddlepoint_control .description a {word-break: break-all; word-wrap: break-word;}


#trail-map-controls .inline-control label {display:inline-block; width: 75px;}

#trail-map-controls .toggle-paddlepoint {float:right; cursor:pointer;}
#trail-map-controls .paddlepoint_control[data-show="1"] .showing {display:block;}
#trail-map-controls .paddlepoint_control[data-show="1"] .hidden {display:none;}
#trail-map-controls .paddlepoint_control[data-show="0"] .showing {display:none;}
#trail-map-controls .paddlepoint_control[data-show="0"] .hidden {display:block}
#trail-map-controls .paddlepoint_control[data-show="0"] {background-color: #f0f0f0;}

#trail-map-controls .paddlepoint_control .description {font-size: 12px; font-weight: 300;}
#trail-map-controls .paddlepoint_control[data-show="0"] .description {display:none;}
#trail-map-controls .paddlepoint_control[data-show="1"] .description {display:block;}


#trail-map-controls .paddlepoint_control.selected {background-color: lightcyan; font-weight: 600;}


#map_and_controls {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3:1 ratio for 75%/25% */
    gap: 10px;
}

@media (max-width: 768px) {
    #map_and_controls {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        grid-template-rows: auto auto; /* Ensure rows take up necessary height*/
    }
    #paddlepoint_controls {height: auto;}
}


/* Default marker icon with background image */
.marker-icon div {
    width: 30px;
    height: 30px;
    background-size: cover;
    position: relative;
}

/* Highlighted marker with circle background */
.highlighted-marker div::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 215, 0, 0.6); /* Yellowish!! */
    z-index: -1;
}

#trail_map .leaflet-control-attribution {
    display: block !important; 
    visibility: visible; 
}

#paddlespoints_trail_builder ol {
    counter-reset: list-counter;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    font-family: Arial, sans-serif;
}


#paddlespoints_trail_builder ol li {
    counter-increment: list-counter;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 10px 15px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

#paddlespoints_trail_builder ol li::before {
    content: counter(list-counter);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px; 
    height: 30px; 
    margin-right: 10px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    line-height: 1;  /* Ensures the number is vertically centered */
    min-width: 30px; 
}



/*.trail-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 10px;}

.trail_feature { display: flex; align-items: center; padding: 8px 15px;  font-family: Arial, sans-serif; font-size: 14px; }
.trail_feature_value { color: #555; font-weight: normal; font-size: 20px;}
.trail_feature_unit { color: #555; font-weight: normal; font-size: 12px;}
.trail_feature_label { font-weight: bold; color: #333; margin-right: 5px;}*/

.trail_features_container {
    display: flex;
    flex-wrap: wrap; /* Enables wrapping */
    gap: 20px; /* Space between features */
    justify-content: center; /* Center features when wrapping */
}

.trail_feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: Arial, sans-serif;
    min-width: 100px; /* Ensures they don’t shrink too much */
    
    box-shadow: 3px 3px 13px #e0e0e0!important;
    -webkit-box-shadow: 3px 3px 13px #e0e0e0!important;
    padding: 15px;
    
    border-radius: 5px;
}

.trail_feature_value_wrapper {
    display: flex;
    align-items: baseline; /* Aligns unit and value properly */
    gap: 5px;
}

.trail_feature_value {
    font-size: 2rem; /* Large value */
    font-weight: bold;
}

.trail_feature_unit {
    font-size: 1.5rem; /* Smaller than value */
    color: #555;
}

.trail_feature_label {
    font-size: 1.5rem;
    color: #999; /* Lighter label */
    margin-top: 5px;
}

#nearby_trails h3 {text-align: center; color:#555; height:50px; overflow-y: hidden;}
.nearby_trail .trail_feature {width:120px; color:#555;}
.nearby_trail .trail_feature .trail_feature_value {font-size: 14px; }
.nearby_trail .trail_feature .trail_feature_unit {font-size: 13px;}
.nearby_trail .trail_feature .trail_feature_label {font-size: 12px;}

.nearby_trail_image {
    width: 100%;          /* or 100%, if you want it responsive */
    height: 150px;         /* fixed height for consistent size */
    overflow: hidden;      /* hides overflow when image is cropped */
    border-radius: 8px;    /* optional: adds rounded corners */
    display: inline-block; /* allows multiple images side by side */
    margin: 5px;
}

.nearby_trail_image img {
    border-radius: 5px; 
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* the key property */
    object-position: center; /* optional: centers the crop */
    display: block;
}


.nearby_trail { 
    box-shadow: 3px 3px 13px #e0e0e0!important;
    -webkit-box-shadow: 3px 3px 13px #e0e0e0!important;
    padding: 15px;    
    border-radius: 5px;
    margin:5px;
}




#paddlespoints_trail_builder #start-end-container {margin-top: 20px; padding: 10px; display: flex; flex-direction: column;gap: 15px;}
#paddlespoints_trail_builder .start_end {    background-color: #ffffff; border: 1px solid #ccc; border-radius: 8px; padding: 15px;font-family: Arial, sans-serif;    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
#paddlespoints_trail_builder .start_end_label { font-weight: bold; color: #333; margin-bottom: 5px; display: block;}
#paddlespoints_trail_builder .start_end_value { color: #555;  margin: 0; line-height: 1.6; font-size: 14px;}


.river-level-chart {width:100%; height:150px;}


#paddlespoints_trail_builder section {width:100%;margin: auto;padding: 20px;background-color: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 30px;}

/** Weather **/
/*.weather-summary { width:100%;margin: auto;padding: 20px;background-color: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 30px;}*/
.weather-summary[data-show="0"] { background-color: #f0f0f0;} 
.weather-summary .weather-toggle {cursor:pointer;}
.weather-header { text-align: center; margin-bottom: 20px;}
.weather-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px;}
.weather-column {text-align: center; padding: 10px; background-color: #f9f9fc; border: 1px solid #ddd; border-radius: 8px;}
.weather-column img {width: 40px; height: 40px; margin-bottom: 5px;}
.weather-time { font-weight: bold; margin-bottom: 5px;}
.weather-detail { margin: 3px 0;}
.weather-summary { margin-bottom: 30px;}
.weather-scroll-container { width: 100%; overflow-x: auto; white-space: nowrap; padding: 10px 0;}
.weather-grid {display: inline-block; white-space: nowrap;}
.weather-column { display: inline-block; width: 120px; text-align: center; padding: 10px; background-color: #f9f9fc; border: 1px solid #ddd; border-radius: 8px; margin-right: 5px;}
.weather-column img { width: 40px; height: 40px; margin-bottom: 5px;}
.weather-time { font-weight: bold; margin-bottom: 5px;}
.weather-detail { margin: 3px 0;}
.weather-date {font-size: 16px; font-weight: 600;}
.weather-sunrise { border: 2px solid #f0ad4e;  background-color: #fff3cd; }
.weather-toggle {float:right;}
/** End Weather **/

/* trail buttons */
#trail-options {margin-top:10px;}
#trail-options button { background-color: #6dc1ed; color: white;  padding: 10px 20px;border-radius: 5px;border: none;font-size: 16px;font-weight: bold;cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; }
#trail-options button:hover { background-color: #244082;}
#trail-options button:focus { outline: none;box-shadow: 0 0 10px rgba(52, 152, 219, 0.8); }
#trail-options button:disabled { background-color: #bdc3c7; cursor: not-allowed; opacity: 0.6;}
/* end trail buttons */


/* Tide Graph */

/*#tide_information { width: 100%;  white-space: nowrap; margin: auto;padding: 20px;background-color: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 30px;}*/
#tide_header { text-align: center; margin-bottom: 20px;}
#tide_graph_container { width: 100%; overflow-x: auto; white-space: nowrap; }

/** end tide graph */

.trail_widget { 
/*    background-color: #61afa8;
    border-radius: 5px;
    padding: 10px;
    padding-top: 1px;    
    color: white;
    width:100%;
    box-shadow: 5px 5px 5px 0px #e0e0e0;
    margin-bottom:10px;*/
}

.trail_widget.active {display:block;}

#trail_widget_buttons {margin-bottom: 5px;}
.trail_widget_button {border-bottom: 5px solid white; margin-right:1px !important; padding:5px !important; font-size: 11px;}
.trail_widget_button.active {border-bottom: 5px solid black;}

#paddlespoints_trail_builder .well.key_information {border-color: #61afa8 !important;}
#paddlespoints_trail_builder .well.discover_more {border-color: #6dc1ed !important;}
#paddlespoints_trail_builder .well.license_information {border-color: #afcc49 !important;}
#paddlespoints_trail_builder .well.safety_information {border-color: #00dd00 !important;}
#paddlespoints_trail_builder .well.environment {border-color: #0099aa !important;}
#paddlespoints_trail_builder .well.video .trail_widget_content {text-align: center;}


/*#paddlespoints_trail_builder .accessability_images {width:100%; text-align: center;}
#paddlespoints_trail_builder .accessability_images img {width:30%; border: 5px solid #61afa8; border-radius:5px;margin-left: 2px; margin-right:2px;}*/

#paddlespoints_trail_builder .accessability_images {
  width: 100%;
  text-align: center;
  margin-top:10px;
}

#paddlespoints_trail_builder .accessability_images img {
  width: 30%;
  aspect-ratio: 1 / 1;      /* Make them square boxes */
  object-fit: cover;        /* Crop instead of stretch */
  border: 5px solid #61afa8;
  border-radius: 5px;
  margin: 0 2px;
}


/*
.trail_widget_links {
    display: flex;
    justify-content: center;  Centers the images 
    gap: 20px;  Space between images 
}

.trail_widget_links a {
    display: flex;
    align-items: center;
}

.trail_widget_links img {
    height: 100px;  Ensures both images have the same height 
    width: auto;  Keeps aspect ratio 
}*/

.trail_widget_links {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* optional: vertically center images */
    justify-content: center;
    gap: 10px; /* optional: space between images */
    overflow-x: auto; /* optional: allows horizontal scrolling if container is too narrow */
}

.trail_widget_links img {
    max-height: 100px; /* adjust as needed */
    height: auto;
    width: auto;
    flex-shrink: 0; /* prevents shrinking */
}


/*.trail_widget.key_information { background-color: #61afa8;}
.trail_widget.discover_more { background-color: #6dc1ed;}
.trail_widget.license_information { background-color: #afcc49;}
.trail_widget.safety_information { background-color: #ff0000;}

.trail_widget_button.key_information { background-color: #61afa8;}
.trail_widget_button.discover_more { background-color: #6dc1ed;}                     
.trail_widget_button.license_information { background-color: #afcc49;}
.trail_widget_button.safety_information { background-color: #ff0000;}*/



/*.trail_widget a {color: black;  text-decoration: none;}
.trail_widget a:hover {color: black; font-weight: 600;}
.trail_widget a:visited {color: black; }*/

#map_and_controls {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3:1 ratio for 75%/25% */
    gap: 10px;
}

@media (max-width: 768px) {
    #map_and_controls {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        grid-template-rows: auto auto; /* Ensure rows take up necessary height*/
    }
    #paddlepoint_controls {height: auto;}
}


/* Breadcrumb Styling */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  font-size: 16px;
  justify-content: center;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "|"; /* Separator */
  margin: 0 10px;
  color: #888;
}

.breadcrumb a {
  text-decoration: none;
  color: gray;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
  padding: 10px;
}

.breadcrumb a:hover {
  color: #0056b3;
   background: #f8f9fa;
  border-radius: 8px;

}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

.expandable_text {
    overflow: hidden;
    transition: max-height 0.3s ease;
 }
  
.show-more {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

 
.show-more-btn {
  display: none;
  background: white;
  border: 1px solid #244082;
  color: #244082;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 8px;
  transition: all 0.3s ease;
}

.show-more-btn:hover {
  background: #244082;
  color: white;
}


/* progress bar */
#creating-pdf p {
    text-align: center;
}

#progress-bar {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 12px;
  background: #eee;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  z-index: 9999;
  overflow: hidden;
}

#progress-bar .bar {
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, #3498db, #2980b9);
  animation: slide 1s ease-in-out infinite alternate;
  border-radius: 20px; /* Rounded progress bar */
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}




.river_level_header .status-normal span {color:green;}
.river_level_header .status-warning-high span, .river_level_header .status-warning-low span {color:red;}

.river-chart {
    width: 100%;       /* full width of parent */
    height: 300px;     /* fixed height, can adjust */
}

#supported_by {
    display: flex;           /* Put images next to each other */
    flex-wrap: wrap;         /* Wrap to next line if not enough space */
    justify-content: flex-end; /* Align images to the right */
    gap: 10px;               /* Space between images */
    align-items: center;     /* Vertically center if wrapped */
    margin-bottom:10px;
}

#supported_by img {
    height: 60px;           /* Fixed height */
    width: auto;             /* Width adjusts to maintain aspect ratio */
    display: block;          /* Remove inline spacing issues */
}