/******************************************/
/* Make some more space in the repeater fields  */
/******************************************/

/* .acf-repeater .acf-row-handle {
    width: 0px;
}

.acf-table>tbody>tr>th, .acf-table>tbody>tr>td, .acf-table>thead>tr>th, .acf-table>thead>tr>td {
    padding: 0;
} */

.interface-complementary-area.editor-sidebar {
  width: 500px!important;
}

.interface-complementary-area__fill {
  width: 500px!important;
}

/******************************************/
/* Map container */
/******************************************/

.map-container {
  position: relative; 
  height: 500px;
  padding-bottom: 0;
  display:flex;
}

/* Make the map full width on mobile */
@media (max-width: 767px) {
  .map-container {
    margin-left: -15px;
    margin-right: -15px;
  }
}

.leaflet-container {
 border-top-right-radius: 10px;
 /* border-top-left-radius: 10px ; */
}

@media (max-width: 767px) {
  .leaflet-container {
    border-top-right-radius: 0;
  }
}

/* @media (min-width: 1024px) {
  .leaflet-container {
    border-top-left-radius: 10px;
  }
} */


.map {
  height: 100%;
  width:100%;
  z-index: 1;
}

@media (orientation: portrait) {
    .map-container {
        height: 70vh;
    }
}

@media (orientation: landscape) {
    .map-container {
        height: 70vh;
    }
}



/*****************************************/
/* Geo location */
/*****************************************/

.custom-circle-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: #007bff;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000; /* force it on top */
}



/*****************************************/
/* Customn popup */ 
/*****************************************/

/* Popup title*/
.custom-popup-title {
  display: flex;
  align-items: flex-start;
}

.marker-label {
  flex-shrink: 0; /* Prevent label from shrinking */
  margin-right: 0.2rem;
}

.marker-title {
  flex: 1;
  line-height: 1.3;
  text-transform: capitalize;
}

.marker-label-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--global-palette1);
  font-weight: bold;
  font-size: 0.75rem;
  margin-right: 0.5em;
  flex-shrink: 0;
  line-height:1.2;
  margin-top: 1px; /* align the circle with the title text */

}

/*********************/


.popup-header {
  display: flex; 
  justify-content: space-between;
  align-items: center; 
  margin: 0;
  padding: 7px;
  background-color: var(--global-palette1);
  color: #ffffff;
}

.popup-content-wrapper {
  padding: 10px
}


.custom-popup {
  position: absolute;
  height: 50vh;
  top: 20px; /* distance from top of map */
  left: 50%; /* center horizontally */
  transform: translateX(-50%); /* truly center it */
  z-index: 1000;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0;
  width: 30%;

  /* Make the content scrollable if too tall */
  overflow-y: auto !important;   /* Enables scrolling */
  max-height: 100% !important;
  margin: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */
  /*******************************************/
}

/* Set the popup width for mobile */
@media (max-width: 768px) {
  .custom-popup {
    width: 60vw;
  }
}

.custom-popup-title {
  text-transform:uppercase;
  line-height: 1.2;
  margin-bottom: 0 !important;
}

.custom-popup.hidden {
  display: none;
}

/* Hide the link at the bottom */
.leaflet-bottom {
   display:none;
}



.popup-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #EEEEEE;
  width: 20px;
  height: 20px;
  display: inline-flex;  
  transition: color 0.2s ease;
  align-self: flex-start;
}

.popup-close-btn:hover {
  color: #FFFFFF;
  background-color: transparent;
}


.marker-image {
  width: 100%; 
  height: auto; 
}

.marker-image-container {
  margin-bottom:1rem;
}

.no-bottom-margin {
  margin-bottom: 0!important;
}

/* make the border radius on all corners*/
.marker-image-all-border-radiuses {
  border-radius:8px;
  margin-bottom:1rem;
}

.marker-image-top-border-radiuses {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


.marker-image-caption {
  background-color: #dddddd;
  font-size: 0.8rem;
  text-align: left;
  padding: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0!important;
}

/* override the above padding */
/* .marker-image-caption-full-width {
  padding: 8px 15px 8px 15px;
} */

/***************/
/* Circle Icon */
/***************/

.numbered-custom-circle-icon path {
  fill: var(--circle-fill, var(--global-palette1, #bb1919));
  opacity: .75;
}

.lettered-custom-circle-icon path {
  fill: var(--circle-fill, #FF6F00);
  opacity: .75;
}

.custom-circle-icon text {
  font-size: 16px;
  font-weight: normal;
  fill: var(--text-color, white);
  text-anchor: middle;
  font-family: var(--font-family, Arial, sans-serif);
}

.custom-circle-icon {
  opacity: 0.85;
}





/******************************/
/* Route colours */
/******************************/

.custom-route-line {
  stroke: var(--global-palette1, #bb1919);
  stroke-opacity: var(--route-opacity, 0.5);
}


/********************/
/* popup */
/********************/

.close-popup {
   color: var(--global-palette2, #bb1919);
   border: 2px var(--global-palette2, #bb1919) solid;
   border-color: var(--global-palette2, #bb1919);
   background-color: transparent;
   margin-top: 10px;
   display: block; 
   padding: 3px 10px;
   text-transform: uppercase;
   font-size: .75rem;
   font-weight: bold;
}

.close-popup:hover {
  background-color: var(--global-palette2, #bb1919);
  color: var(--global-palette9, #FFFFFF);
  border-color: var(--global-palette2, #bb1919); 
}


/******************************************/
/* Scrollable box which sits on the map */
/******************************************/

/* The scrollable sidebar overlay sjb */
.map-overlay-scrollbox {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 30px; /* narrow bar */
  background-color: var(--global-palette1, #bb1919);
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  overflow: hidden;
  opacity: 1;
  border-top-left-radius: 10px;
  padding-left: 1px;
}

@media (max-width: 767px) {
  .map-overlay-scrollbox {
    border-top-left-radius: 0;
   }
}


.map-overlay-scrollbox:hover {
  cursor: default;
}

.map-overlay-scrollbox p {
  color: #FFFFFF;
}

/* Move the zoom in/out button over so it's not underneath the overlay scrollbox */
.leaflet-control-container .leaflet-left .leaflet-control {
    margin-left: 10px;
}

/* Narrower on small screens
@media (max-width: 767px) {
  .map-overlay-scrollbox {
    width: 25px;
  }
} */

/* The rotated text inside */
.rotated-text {
  transform: rotate(270deg);
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-size: 0.85rem;
  color: #333;
}

.map-overlay-scrollbox .rotated-text p:last-child {
  margin-bottom: 0;
  font-size: 0.8rem;
}


/***************************************/
/*  CSS for displaying the marker data on the page not the map */

.marker-circle {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-right: 15px;
  flex-shrink: 0;
}

.marker-circle-numbered {
  background-color: var(--global-palette1);
}
.marker-circle-lettered {
background-color: #FF6F00;
}

.marker-flex-container {
  border-bottom: 1px solid #ccc;
  width: 100%;
  margin-bottom: 20px; 
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;       /* allows wrapping on smaller screens */
  gap: 20px;  
}

.marker-header {
  display: flex; 
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: white;
  padding: 10px 20px 10px 20px;
  border-radius: 8px;
}

.marker-title {
  display: flex; 
  align-items: center;
  padding-right: 0.5rem;
}

/* Mobile: stack columns vertically */
@media (max-width: 767px) {
  .marker-title.lettered {
     margin-bottom: 10px;
  }
}

.marker-flex-column {
    width: calc(50% - 10px); /* subtract half the gap if using gap */
    box-sizing: border-box;
}

.marker-data-item {
  margin-bottom:1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.marker-data {
  margin-bottom: 1rem;
}

/*********************************/
/* Marker heading and paragraphs */
/*********************************/

  .route-info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: left;
  }

  .route-info-paragraph {
    width: 50%;
    max-width: 800px;
    margin-bottom: 1rem;
  }

  .route-info-paragraph1 {
    font-weight:600;
  }

   .route-info-paragraph p {    
    margin-bottom: 0!important;
  }

  @media (max-width: 1024px) {
    .route-info-paragraph {
      width: 75%;
    }
  }

  @media (max-width: 640px) {
    .route-info-paragraph {
      width: 100%;
    }
  }


/****************************************/
/* Container for the marker listings */
/****************************************/

.popupcontent-card-container {
  display: flex;
  flex-wrap: wrap;       /* Allow wrapping if < 3 items */
  gap: 2rem;
  row-gap: 0;
  padding: 0 0 0 0;
}

.popupcontent-card {
  width: calc(33.333% - 2rem); /* 3 columns minus gap compensation */
  padding: 0;
  text-align: left;
  font-size: 1rem;
}

/* Mobile: stack columns vertically */
@media (max-width: 767px) {
  .popupcontent-card {
    width: 100%;
  }
}


/***********************************/
/* Default style (desktop) */
.popupcontent-card-container {
  /* padding-left: 10px 0 10px 10px; */
  transition: padding-left 0.4s ease;
}

/* On small screens: start at 0 */
/* @media (max-width: 767px) {
  .popupcontent-card-container {
    padding-left: 0;
  }
} */

/* Put some space under the lettered title block */
.marker-title.lettered {
  margin-bottom: 10px;
}


/**********************************/
    /* Collapse the marker data initialy  */
    .collapsable-marker-data {
      overflow: hidden;
      height: 0;
      transition: height 0.8s ease;
      margin-top: 0;    
    }

    .collapsable-marker-data-inner {
      padding: 10px 20px 10px 20px
    }

/*****************************/
/* Set the toggle icon       */
/*****************************/

.map-toggle-button:hover,
.map-toggle-button:focus,
.map-toggle-button:active {
  box-shadow: none !important;
}

.map-toggle-button {
  background-color: transparent;
  border-width: 0;
  cursor: pointer;
  padding: 5px;
  line-height: 0;
}

/* Hover state */
.map-toggle-button:hover {
  background-color: #ffffff;
} 

/* Focus state */
.map-toggle-button:focus {
  background-color: transparent;
  border-color: var(--global-palette1);
} 

/* Focus + Hover state */
/* .map-toggle-button:focus:hover {
  background-color: var(--global-palette1);
  border-color: var(--global-palette1);
}  */

/* Default icon */
.toggle-icon {
  color: var(--global-palette1);
  transition: color 0.3s ease, transform 0.3s ease;
  font-size: 20px;
}

.toggle-icon:hover {
  color: var(--global-palette1);
}

/* Icon turns white on hover (always) */
.map-toggle-button:hover .toggle-icon {
  color: var(--global-palette1) !important;
}

/* Icon stays palette color when item is open */
.marker-data-item.open .toggle-icon {
  color: var(--global-palette1);
}

/* Icon stays palette color when focused */
.map-toggle-button:focus .toggle-icon {
  color: var(--global-palette1);
}

/* Rotate icon when the data is displayed */
.marker-data-item.open .toggle-icon {
  transform: rotate(180deg);
}


/*****************************/
/* map header                */
/*****************************/

.map-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

@media (max-width: 767px) {
  .map-header {
      margin-bottom: 1rem;
  }
}


.map-header-left-column,
.map-header-right-column {
  padding: 0 0 0 0;
}

/* Default mobile-first: stack columns */
.map-header-left-column,
.map-header-right-column {
  width: 100%;
}

/* Hide on mobile (smaller than 768px), show on tablets & desktops */
.map-header-right-column {
    display: none;
}

@media (min-width: 768px) {
    .map-header-right-column {
        display: block;
    }
}

/* Show on mobile only (smaller than 768px) and 100% width. */
.map-header-image-mobile {
    display: block;
    width: 100%;
}


@media (min-width: 768px) {
    .map-header-image-mobile {
        display: none;
    }
}


/* At 768px and up: side-by-side with 2/3 + 1/3 */
@media (min-width: 768px) {
  .map-header-left-column {
    width: calc(66.6666% - 1rem);
  }

  .map-header-right-column {
    width: calc(33.3333% - 1rem);
  }
}

.map-header .map-titles h2.map-pre-title {
    margin: 0 0 .5rem 0;
    font-weight: 300;
    line-height: 1.05;
    font-size: 14px;
    color: var(--global-palette1) ;
    text-transform: uppercase;
}

.map-header .map-titles h2.map-subtitle {
    margin: 0 0 0 0;
    color: #6c6f7b ;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.3;
}

.map-header .map-titles h1.map-title {
  margin: 0 0 0 0;
  font-weight: 300;
  line-height: 1.05;
}


/* Set the search filter's padding*/
.kb-filter-search {
  padding: 3px 7px 3px 7px!important;
}


/************************************/
/* Map Titles */
/**************/

.map-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 0;
  row-gap: 1rem;
}

.map-titles-column1 {
  flex: 0 0 calc(66.66% - .6rem); /* subtract ~ 50% of gap */
  box-sizing: border-box;
}

.map-titles-column2 {
  flex: 0 0 calc(33.33% - 1rem); /* subtract ~ 50% of gap */
  box-sizing: border-box;
  align-content: flex-end;
}

@media (max-width: 768px) {
  .map-titles-column1,
  .map-titles-column2 {
    flex: 0 0 100%;
  }

}

.map-titles-column2-title {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.05;
  font-size: 14px;
  color: var(--global-palette1);
  text-transform: uppercase;
}

/**************************************/

.map-header-contents {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1.5rem;
  margin-bottom: 1rem;
}

.map-header-content1,
.map-header-content2 {
  flex: 1 1 calc(50% - 0.75rem);
  box-sizing: border-box;
}

.map-header-content {
  margin-bottom: 0!important;
}

@media (max-width: 767px) {
  .map-header-content1,
  .map-header-content2 {
    flex: 1 1 100%;
  }
}

.map-header-contents .map-header-content p {
  margin-bottom: 1rem;
}

.map-header-contents .map-header-content p:last-of-type {
  margin-bottom: 0;
}

/******************************/
/* Marker titles */

.lettered-marker-title {
  font-size: 1.25rem;
}

.numbered-marker-title {
  font-size: 1.25rem;
  font-weight: 300;
}

@media (max-width: 767px) {
  .numbered-marker-title {
    font-size: 1.1rem;
  }
}


/*******************************************/
/* Icons for distance, time and difficulty */
/*******************************************/

.info-row {
  display: flex;
  gap: 2rem;
  /* flex-wrap: wrap; */
  justify-content: space-between;
  /* position: relative; */
  align-items: center;
}


/* Prevent extreme right on desktops/tablets*/
@media (min-width: 767px) {
  .info-row {
    width:95%
  }
}

.info-item-center {
  margin-left: auto;
  margin-right: auto;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0; /* optional, for flexibility */
}

.icon {
  width: 32px;
  height: 32px;
  color: var(--global-palette1);
  stroke: currentColor; 
  stroke-width: 1.2;
  fill: none;
  flex-shrink: 0;
}

.text-block {
  display: flex;
  flex-direction: column;
}

.text-block strong {
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1.2;
}

.text-block span {
  font-size: 0.9rem;
  color: #444;
}

@media (max-width: 767px) {

  .icon {
    width: 26px;
    height: 26px;
  }

  .info-row {
      gap: 0.75rem;
  }

  .info-row {
    gap: 0.25rem;
  }

  .text-block span {
    font-size: 0.75rem;
  }

  .text-block strong {  
    font-size: 0.75rem;
  }

  .info-item {
    gap: 0.25rem;
  }

}

/*********************************************/
/* Map Instructions */
/*********************************************/

  /* .map-instructions {
    font-size: .8rem;
    background-color: #f6f6f6;
    padding: 20px;
    line-height: 1.4;
    margin-bottom: 25px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px ;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
  } */

:root {
      --secondary-color: #f3f6fa;
      --text-primary: #101518;
      --text-secondary: #4a5568;
    }

    .map-instructions-box {
      /* background-color: white; */
      padding: 0;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      margin-bottom: 2rem;
    }

    @media (max-width: 767px) {
      .map-instructions-box {
        margin-left: -15px;
        margin-right: -15px;
      }
    }



    .map-instructions-header h2 {
      font-size: 1.25rem;
      margin: 0;
      font-weight: 300;
    }

    @media (max-width: 767px) {
    .map-instructions-header h2 {
      font-size: 1.1rem;
    }
}

    .map-instructions-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media (min-width: 600px) {
      .map-instructions-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 900px) {
      .map-instructions-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .map-instructions-item {
      display: flex;
      align-items: flex-start;
    }

    .map-instructions-icon-circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--global-palette1);
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }

    .map-instructions-icon-circle svg {
      width: 20px;
      height: 20px;
      fill: var(--global-palette1);
    }

    @media (max-width: 767px) {
      .map-instructions-icon-circle {
        width: 26px;
        height: 26px;
      }

      .map-instructions-icon-circle svg {
        width: 16px;
        height: 16px;
      }
    }

    .map-instructions-item h2 {
      font-size: 1rem;
      margin: 0 0 8px 0;
      font-weight:300;
      color: var(--global-palette4);
    }

    .map-instructions-item p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .map-instructions-kbd {
      font-family: monospace;
      background: #eee;
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 0.9em;
    }

.map-instructions-badge {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;           /* eliminate line-height spacing */
  padding: 0;
  margin: 0 1px;            /* minimal horizontal space */
  width: auto;              /* don't constrain the span width */
  height: auto;
}

    /* .map-instructions-badge {
      display: inline-block;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 0.75rem;
      color: white;
      margin: 0 2px;
      padding-right: 1px;
    } */

    .map-instructions-badge.numbered-marker {
      background: var(--global-palette1);
    }

    .map-instructions-badge.lettered-color {
      background: #FF6F00;
    }

.map-instructions-dot {
  display: inline-block;
  vertical-align: middle; /* Align with text */
  width: 16px;
  height: 16px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: relative;
  margin-left: 4px;
}

.map-instructions-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #2563eb;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* overide the margin-bottom default on paragraphs */
.map-last-paragraph {
  margin-bottom:0!important;
}

    /* map instructions for accordion effect */

    
.map-instructions-header {
  display: flex; 
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: white;
  padding: 10px 15px 0 15px;
  border-radius: 0 0 8px 8px;     
  margin-bottom: .7rem;
}


@media (max-width: 767px) {
  .map-instructions-box {
    border-radius: 0;    
  }
}

/* Icon stays palette color when item is open */
.map-instructions-data-item.open .toggle-icon {
  color: var(--global-palette1);
}

/* Rotate icon when the data is displayed */
.map-instructions-data-item.open .toggle-icon {
  transform: rotate(180deg);
}

.collapsable-map-instructions {
      overflow: hidden;
      height: 0;
      transition: height 0.8s ease;
      margin-top: .7rem;   
    }

    .collapsable-map-instructions-inner {
        padding: 15px;
    }

/* marker-circle marker-circle-numbered */
.map-instructions-header-icon-box {
    width: 40px;
  height: 40px;
  border-radius: 5px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-right: 15px;
  flex-shrink: 0;
    background-color: var(--global-palette1);
}

.map-instructions-title {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
}

.map-instructions-main-icon {
  width: 32px;
  height: 32px;
  color: #ffffff;
  stroke: currentColor; 
  stroke-width: 1.2;
  fill: none;
  flex-shrink: 0;
}

/*********************************/
/* Ensure the marker's containing div just not change the mouse pointer */
.leaflet-marker-icon.leaflet-interactive {
  pointer-events: none !important;
}

/*********************************/

/* Hide number input spinners in ACF fields */
.acf-field input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

.acf-field input[type=number]::-webkit-inner-spin-button, 
.acf-field input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  margin: 0;
}

/**************************************/
/*  prev/next navigation */

.cpt-navigation {
    display: flex;
    justify-content: space-start;
    margin-top: 0;
    margin-bottom: 1rem;
    gap: 1rem;
}

.prev-button, .next-button {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 10px 15px;
    background: #FFFFFF;
    color: var(--global-palette1);
    border: 2px solid var(--global-palette1);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
    font-size: 1rem;
    max-width: 48%;
    text-align: left;
}

.next-button {
margin-left: auto;
}

.prev-button:hover,
.next-button:hover,
.prev-button:focus,
.next-button:focus,
.prev-button:active,
.next-button:active {
    background: var(--global-palette1);
    color: #FFFFFF;
    outline: none;
    box-shadow: none;
}



/* Text container */
.prev-button .btn-text,
.next-button .btn-text {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    flex-grow: 1;
    color: #333333;
}

.prev-button:hover .btn-text,
.prev-button:focus .btn-text,
.prev-button:active .btn-text {
    color: #ffffff;
}

.next-button:hover .btn-text,
.next-button:focus .btn-text,
.next-button:active .btn-text {
    color: #ffffff;
}

/* Subtitle styling */
.prev-button .subtitle,
.next-button .subtitle {
    font-size: 0.9em;
    opacity: 0.9;
    line-height: 1.2;
    color: var(--global-palette1);
}

.prev-button:hover .subtitle,
.prev-button:focus .subtitle,
.prev-button:active .subtitle,
.next-button:hover .subtitle,
.next-button:focus .subtitle,
.next-button:active .subtitle {
    color: #ffffff;
}

.btn-text:hover 
{
  color:white;
}

.btn-text .title 
{
  margin-top: -3px;
  font-size: 0.9rem;
}

/* Title styling */
.prev-button strong,
.next-button strong {
    font-size: 1rem;
    line-height: 1.2;
}

.next-button {
    display: flex;
    justify-content: space-between; /* Push icon to far right */
    align-items: flex-start;        /* Align icon to top (subtitle) */
    gap: 0.5rem;
}

.prev-button-icon, .next-button-icon {
  width: 16px;
  height: 16px;
  color: var(--global-palette1);
  stroke: currentColor; 
  stroke-width: 1.2;
  fill: none;
  flex-shrink: 0;
  font-size: 1rem;      /* Keep icon size */
  line-height: 1;
  margin-top: 0;         /* Remove top margin */
  flex-shrink: 0;        /* Prevent shrinking */
  transition: color 0.3s;
}


.prev-button:hover .prev-button-icon,
.prev-button:active .prev-button-icon,
.prev-button:focus .prev-button-icon,
.next-button:hover .next-button-icon,
.next-button:active .next-button-icon,
.next-button:focus .next-button-icon {
    color: #ffffff;
}

/*****************************/
/* button to resze and align the map */

:root {
  --maps-block-default-button-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23FFFFFF%22 viewBox=%220 0 256 512%22%3E%3Cpath d=%22M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z%22/%3E%3C/svg%3E");
}

.reset-map-bounds-btn {
    background-color: var(--global-palette1);
    color: #fff;
    border: none;
    padding: 0.25rem .5rem 0.25rem 1rem;
    font-size: .8rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: fit-content;
    letter-spacing: normal;
    text-transform: uppercase;
    border-radius: .25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.reset-map-bounds-btn:hover {
  background-color: var(--global-palette2);
}


.reset-map-bounds-btn:active,
.reset-map-bounds-btn:focus {
  background-color: var(--global-palette1);
}

.reset-map-bounds-btn::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: var(--maps-block-default-button-icon);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  position: relative;
  top: 2px;
}