/* Global */
main {
  /*padding: 50px;
  margin: auto;
  background-color: #a4c2a5;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;*/
  display: block;
  margin: 0 auto;
}

/* make the green band full-width, with vertical padding */
.bf-content-black {
  background-color: #000;
  padding: 50px 0;
  /* 50px top/bottom, full width */
  width: 100%;
}

.bf-content-white {
  background-color: #fff;
  padding: 0;
  /* 50px top/bottom, full width */
  width: 100%;
}

/* center and constrain your actual content */
.bf-content-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  /* optional side padding */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bf-header {
  color: #fff;
  font-size: 1.1em;
  padding: 0px;
  margin: 0px;
}

.bf-green-font {
  color: #98b523
}

.bf-white-font {
  color: #fff !important;
}

/* form section header */
.bf-form-header {
  display: block;
  /* so border-bottom spans full line */
  font-size: 1.25rem;
  /* adjust to taste */
  font-weight: 600;
  color: #006400;
  /* your dark-green */
  border-bottom: 3px solid #006400;
  padding-bottom: 0.25rem;
  /* space between text and line */
  margin: 2rem auto 1.5rem;
  /* top/bottom space, centered */
  max-width: 1200px;
  /* same as .bf-content-inner */
}


/* ensure your grid/form fields fill that same width */
.bf-form-grid {
  width: 100%;
  max-width: 1200px;
  /* match bf-form-header & bf-content-inner */
  margin: 0 auto 2rem;
  /* center + bottom gutter */
}

/* Loading Spinner */
.spinner {
  border: 8px solid #f3f3f3;
  /* Light Grey */
  border-top: 8px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Container and Gallery */
.container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
}

img {
  max-width: 100%;
  max-height: 100%;
  padding: 10px;
}

.detail {
  width: 350px;
  padding: 10px;
  font-size: 20px;
  border: 1px solid #a4c2a5;
  border-radius: 8px;
  background-color: #e7f4e4;
}

.detail-title {
  color: #356859;
}

.fruit {
  display: flex;
  flex-direction: row;
}

.gallery-container img {
  height: 150px;
  object-fit: cover;
  margin: 5px;
  transition: 0.2s ease;
}

.gallery-container img:hover {
  opacity: 0.7;
}

#detail-slideshow {
  padding-bottom: 30px;
}

.detail-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-content {
  padding-top: 25px;
}


#detail-right {
  float: right;
  width: 70%;
  padding-left: 18px;
}

#detail-left {
  float: left;
  width: 26%;
  margin-bottom: 45px;
}

/* ────────────────────────────────────────────── */
/*  Search Results Header (Grid version)        */
/* ────────────────────────────────────────────── */

.bf-search-results-header {
  margin-bottom: 2rem;
}

.bf-content-black .bf-content-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-gap: 0.5rem 1rem;
  /* row-gap, col-gap */
  align-items: start;
  /* top-align all cells */
}

/* Title + stats span both rows in column 1 */
.bf-header {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Button sits in column 2, row 1 */
.search-nav {
  grid-column: 2;
  grid-row: 1;
}

/* “Search Results” title */
.bf-header .bf-green-font {
  color: #94C11F;
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
}

/* result count & pills line */
.bf-header h5 {
  font-size: 1rem;
  color: #fff;
  margin: 0.25rem 0;
  line-height: 1.4;
}


.bf-header .searchtag {
  display: inline-block;
  background-color: #e7f4e4;
  /* light green bg */
  color: #356859;
  /* dark green text */
  padding: 5px 10px;
  margin: 5px 5px 0 0;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
}


/* pill Search Again button */
.search-nav .bfiButton,
.search-button .bfiButton {
  background-color: #94C11F;
  color: #fff !important;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: 20px;
  white-space: nowrap;
  transition: background 0.2s;
}

.search-nav .bfiButton:hover {
  background-color: #7EA91A;
}

.search-button {
  margin: 0 auto;
}

/* ───────────────────────────────────────────── */
/*  Search Result Cards                        */
/* ───────────────────────────────────────────── */
.searchresult-item {
  display: grid;
  grid-template-columns: 250px 1fr;
  background-color: #fff;
  /*  ── Border around the right side only ── */
  border: 4px solid #000;
  border-left: none;
  border-radius: 0 24px 24px 0;
  overflow: hidden;
  margin-bottom: 2rem;
  text-decoration: none;
  color: inherit;
  /* remove any drop-shadow */
  box-shadow: none;
}

/* black backdrop behind the image */
.searchresult-item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
  display: block;
}

/* add the vertical divider between image & text */
.searchresult-text {
  /* this draws the line on the left of the white panel */
  border-left: 1px solid #000;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* your existing text styles… */
.searchresult-text h1 {
  color: #94C11F;
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.searchresult-text p strong {
  color: #333;
  font-size: 1rem;
  margin: 0.25rem 0;
  display: block;
}

.searchresult-text p em {
  font-style: italic;
  color: #333;
  margin: 0.25rem 0;
}

.searchresult-text p:last-of-type {
  color: #333;
  margin: 0.25rem 0;
}

/* ───────────────────────────────────────────── */

/* Search Form OLD */
form,
.varieties-list-container {
  max-width: 1200px;
  padding: 20px;
}

.form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fruit {
  border: 1px solid #a4c2a5;
  background-color: #e7f4e4;
  padding: 10px;
  border-radius: 8px;


}

.element {
  width: 350px;
  border: 1px solid #a4c2a5;
  background-color: #e7f4e4;
  padding: 10px;
  border-radius: 8px;
}

h1 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #356859;
}

label {
  display: inline-block;
  color: #4b3f2f;
}

select,
input[type="checkbox"],
input[type="radio"] {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #c2d6c5;
  border-radius: 4px;
  background-color: #f8fdf8;
  color: #2f4f4f;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 10px;
}

select[multiple] {
  height: 140px;
}

/* Slider form controls */
.slider_form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
}

.range_container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 20px auto;
}

.sliders_control {
  position: relative;
  min-height: 22px;
}

/* Range Input (Slider) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  width: 100%;
  position: absolute;
  background-color: #C6C6C6;
  pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

/* Number inputs */
input[type="number"] {
  color: #8a8383;
  font-size: 14px;
  border: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* Unique ID for fromSlider */
#fromSlider,
#lobeFromSlider {
  height: 0;
  z-index: 1;
}

/* Varieties Grid */
.varieties-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style-type: none;
  padding: 0;
}

.varieties-grid li {
  padding: 10px;
  text-align: center;
}

.varieties-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* center text within */
}

/* Force the image to be its own block row */
.variety-thumb {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Force the name onto its own line below */
.variety-name {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  white-space: normal;
  /* allow wrapping if needed */
}

.varieties-grid li:hover {
  background-color: #e7f4e4;
  /* Light green background on hover */
  color: #000;
  ;
}

.varieties-grid li a {
  text-decoration: none;
  color: #fff;
}

.varieties-grid li a:hover {
  color: #000;
  ;
}

/* Button */
button,
.bfiButton {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #04AA6D;
  color: #fff !important;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .form-container {
    grid-template-columns: 1fr;
  }
}

/* Home Page - Search Form */
/* 1) Grid layout for the form */
.bf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.bf-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 2) Card wrapper */
.bf-card {
  background: #fff;
  border: 2px solid #006400;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: none;
  min-height: 240px;
}

/* 3) Form group heading */
.bf-form-label {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #006400;
}

/* 4) Checkbox styling container */
.bf-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}

.bf-checkbox input {
  margin-right: 0.5rem;
}

.bf-checkbox input[type="checkbox"] {
  /* make the native box exactly 1rem x 1rem */
  width: 1rem;
  height: 1rem;
  /* don’t let flex stretch it */
  flex: 0 0 auto;
  /* keep a little breathing room before the label */
  margin-right: 0.5rem;
}

.bf-checkbox label {
  flex: 1 1 auto;
  line-height: 1.5;
}

/* Plant Characteristics Black Forms with Images */
.bf-form-blackbg {
  background: #000;
  color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem
}

.bf-shape-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.bf-shape-item {
  /* nothing needed here—see the label below */
}

/* make the whole label a flex‐column so img, control, text stack */
.bf-shape-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* full‐width, larger images */
.bf-shape-label img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* container for checkbox + text */
.bf-shape-control {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

/* keep the checkbox square */
.bf-shape-control input {
  width: 1.4em;
  height: 1.4em;
  margin: 0;
  margin-right: 0.5rem;
}

/* your green text */
.bf-shape-control span {
  font-size: 1.2rem;
  color: #a4cf39;
  text-transform: none;
  /* no uppercase */
}

/* checked outline on the image */
.bf-shape-control input:checked~img,
.bf-shape-label input:checked~img {
  /* optional: highlight the image itself, e.g. add a glow */
  box-shadow: 0 0 0 3px #a4cf39;
}

/* Plant Characteristics Textures with Images */
.bf-texture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.bf-texture-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.bf-texture-label img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.bf-texture-control {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

.bf-texture-control input {
  width: 1.4em;
  height: 1.4em;
  margin: 0;
  margin-right: 0.5rem;
}

/* make every texture checkbox the same, larger size */
.bf-texture-control input[type="checkbox"] {
  /* scale up the native box uniformly */
  transform: scale(1.3);
  transform-origin: center center;
  /* keep your spacing consistent */
  margin-right: 0.5rem;
  /* avoid any flex stretching weirdness */
  flex: 0 0 auto;
}

.bf-texture-control span {
  font-size: 1.2rem;
  color: #a4cf39;
}

/* 5) Actions row */
.bf-form-actions {
  text-align: center;
  margin-top: 2rem;
  padding-bottom: 2rem;
}

/* the big green “Search” pill */
.bf-btn-search {
  display: inline-block;
  background-color: #8CBF26;
  /* match your mockup green */
  color: #fff;
  padding: 1.5rem 4rem;
  /* taller and wider for pill shape */
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  /* fully rounded corners */
  cursor: pointer;
  transition: background 0.2s;
}

.bf-btn-search:hover {
  background-color: #7AAF20;
  /* slight darken on hover */
}

/* the thin green divider line */
.bf-form-divider {
  border: none;
  border-top: 2px solid #006400;
  /* dark-green line */
  width: 100%;
  margin: 1.5rem auto;
  /* space above/below, centered */
}

/* “Reset form” as a link-style button */
.bf-btn-reset {
  background: none;
  border: none;
  color: #000 !important;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.bf-btn-reset:hover {
  text-decoration: underline;
}

/* 6) Responsive tweak */
@media (max-width: 768px) {
  .bf-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────── */
/*  Detail page                                   */
/* ────────────────────────────────────────────── */
.bf-detail-header {
  padding: 50px 0;
  /* vertical breathing room */
}

.bf-detail-header .bf-header h2 {
  font-size: 2.5rem;
  /* big variety name */
  line-height: 1.1;
  /* tighten up to the sub-title */
  margin: 0 0 0.25rem;
  /* small gap below */
  color: #98B523;
  /* your green (repeat bf-green-font) */
}

.bf-detail-header .bf-header h3 {
  font-size: 1.25rem;
  /* smaller than h2, but still prominent */
  font-style: italic;
  /* italic for scientific name */
  font-weight: normal;
  /* remove any bolding */
  line-height: 1.2;
  /* keep it close to the h2 */
  margin: 0;
  /* zero out default spacing */
  color: #fff;
  /* ensure it’s white on the black band */
}

.bf-detail-slideshow-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.bf-detail-slides-container #slides {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 15px;
}

.bf-detail-slides-container #slides .slide-thumb {
  height: 75px;
  /* bump up to the size you want */
  width: auto;
  margin: 0 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

.bf-detail-slides-container #slides .slide-thumb:hover {
  transform: scale(1.1);
}

/* ─────────────────────────────────── */
/*  Detail page: geo/fruit/leaves     */
/* ─────────────────────────────────── */
.bf-detail-info-container .bf-content-inner {
  display: flex !important;
  flex-direction: row !important;
  /* ← override the global column */
  flex-wrap: wrap !important;
  gap: 2rem;
}

/* Geographic always full width */
.bf-detail-info-container .bf-detail-geographic,
.bf-detail-info-container .bf-detail-specimens {
  flex: 1 1 100%;
}

/* Then two 50% columns */
.bf-detail-info-container .bf-detail-fruit,
.bf-detail-info-container .bf-detail-leaves,
.bf-detail-info-container .bf-detail-male-flowers,
.bf-detail-info-container .bf-detail-notes,
.bf-detail-info-container .bf-detail-seasonality,
.bf-detail-info-container .bf-detail-map {
  flex: 1 1 calc(50% - 1rem);
  box-sizing: border-box;
}

/* Collapse on small screens */
@media (max-width: 768px) {
  .bf-detail-info-container .bf-content-inner {
    flex-direction: column;
  }

  .bf-detail-info-container .bf-detail-fruit,
  .bf-detail-info-container .bf-detail-leaves,
  .bf-detail-info-container .bf-detail-male-flowers,
  .bf-detail-info-container .bf-detail-notes,
  .bf-detail-info-container .bf-detail-specimens,
  .bf-detail-info-container .bf-detail-seasonality,
  .bf-detail-info-container .bf-detail-map {
    flex: 1 1 100%;
  }
}

/* ─────────────────────────────────── */
/*  Single-line Geographic styling    */
/* ─────────────────────────────────── */
.bf-detail-geographic h3 {
  font-size: 1.75rem;
  color: #006400;
  margin-bottom: 0.5rem;
}

.bf-detail-geographic .bf-geo-line {
  margin: 0;
  font-size: 1rem;
  color: #333;
}

/* ────────────────────────────────────────────── */
/*  Detail page cards: Fruit & Leaves            */
/* ────────────────────────────────────────────── */
.bf-detail-info-container .bf-detail-fruit,
.bf-detail-info-container .bf-detail-leaves,
.bf-detail-info-container .bf-detail-male-flowers,
.bf-detail-info-container .bf-detail-notes,
.bf-detail-info-container .bf-detail-specimens {
  /* wrap only the white area */
  border: 2px solid #006400;
  border-top: none;
  /* remove the top edge */
  border-radius: 0 0 20px 20px;
  /* only round the bottom corners */
  overflow: hidden;
  background: #fff;
  margin-top: 1rem;
  /*flex: 1 1 calc(50% - 1rem) !important;*/
  box-sizing: border-box;
}

/* Black header stripe */
.bf-detail-info-container .bf-detail-fruit h3,
.bf-detail-info-container .bf-detail-leaves h3,
.bf-detail-info-container .bf-detail-male-flowers h3,
.bf-detail-info-container .bf-detail-notes h3,
.bf-detail-info-container .bf-detail-specimens h3 {
  margin: 0;
  padding: 1rem;
  background: #000;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  border: none;
  /* tie it into the card border */
}

/* Body text padding */
.bf-detail-info-container .bf-detail-fruit p,
.bf-detail-info-container .bf-detail-leaves p,
.bf-detail-info-container .bf-detail-male-flowers p,
.bf-detail-info-container .bf-detail-notes p,
.bf-detail-info-container .bf-detail-specimens ul,
.bf-detail-info-container .bf-detail-seasonality,
.bf-detail-info-container .bf-detail-map {
  margin: 0;
  padding: 1rem;
  line-height: 1.25;
}
/* shift the list over */
.bf-detail-info-container .bf-detail-specimens ul {
  margin: 0 0 0 2rem;    /* push right */
  padding: 0;           /* remove default padding */
}

/* remove default bullets and set up spacing for the icon */
.bf-detail-info-container .bf-detail-specimens ul li {
  list-style: none;
  position: relative;
  margin: 1.2rem;
  padding-left: 1.5em;   /* space for icon */
}

/* insert Font Awesome document icon */
/* adjust font-family/weight to whatever version of FA you're using */
.bf-detail-info-container .bf-detail-specimens ul li::before {
  content: "\f016";           /* “file” in FA 4.7; use "\f016" for fa-file-o */
  font-family: "FontAwesome"; /* FA 4.x’s font name */
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
  /* smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: absolute;
  left: 0;
  top: -0.1em;
}


/* ────────────────────────────────────────────── */
/*  Detail text section: tighter spacing         */
/* ────────────────────────────────────────────── */
.bf-detail-text-container .bf-content-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;       /* shrink the gap between elements */
}

/* Headings a bit closer to the text below */
.bf-detail-text-container h4 {
  margin: 1rem 0 0 0.2rem;        /* less top/bottom space */
  line-height: 1.2;              /* tighter lines */
  font-size: 1.1rem;
}

/* Paragraphs more compact */
.bf-detail-text-container p {
  margin: 0 0 0.75rem;           /* smaller bottom margin */
  line-height: 1.0;              /* reduce line-height */
  font-size: .9rem;              /* smaller font size */
}

/* Optional: wrap long links */
.bf-detail-text-container a {
  word-break: break-word;
}


/* ────────────────────────────────────────────── */
/*  Seasonality Display Page                      */
/* ────────────────────────────────────────────── */
.seasonality-graph {
  width: 100%;
  position: relative;
}
.seasonality-graph canvas {
   width: 100% !important;
  height: autio !important;
}

/* Herbarium Specimens Layout */
.bf-specimen-columns {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}

.bf-specimen-column {
  flex: 1;
}

.bf-specimen-column h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

.bf-specimen-column ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.bf-specimen-column li {
  margin-bottom: 5px;
}

.bf-detail-specimens h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

.bf-detail-specimens ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.bf-detail-specimens li {
  margin-bottom: 5px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .bf-specimen-columns {
    flex-direction: column;
    gap: 20px;
  }
}