/* custom styles */

/* Utility Classes */

.baloo-base {
  font-family: "Baloo 2", sans-serif;
}

.work-sans-base {
  font-family: "Work Sans", sans-serif;
}

.poppins-base {
  font-family: "Poppins", sans-serif;
}


.default-icon {
  fill: black;
  width: 14px;
  height: 14px;
}

.copy-icon {
  fill: black;
  width: 16px;
  height: 16px;
  padding-top: 2px;
}

.like-icon {
  fill: #FAD032;
  width: 24px;
  height: 24px;
}

.border-text-green {
  color: #FAD032;
  text-align: center;
  font-size: 64px;
  line-height: 62px; /* 96.875% */
}

.pen-icon {
  fill: rgba(0, 0, 0, 0.68);
  width: 14px;
  height: 14px;
}

.show-more-btn {
  color: rgba(0, 0, 0, 0.52);
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  text-transform: uppercase;
  text-decoration: none;
}

/* Custom Container */
.custom-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.custom-homepage h1,
.custom-homepage h2,
.custom-homepage h3 {
  margin: 0 !important;
  padding: 0 !important;
}

.custom-homepage .h1-hero {
  font-size: 36px !important;
  font-weight: 800;
  line-height: 56.7px;
  letter-spacing: 0em;
  text-align: center;
  font-family: "Baloo 2", sans-serif;
  text-shadow: 0px 4px 27.2px rgba(0, 0, 0, 0.9);
  color: #fff;
}

.custom-homepage .h2-hero {
  font-size: 22px !important;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0em;
  text-align: center;
  text-shadow: 0px 4px 27.2px rgba(0, 0, 0, 0.9);
  font-family: "Work Sans", sans-serif;
  color: #fff;
}

.custom-homepage .bonus-type-name {
  color: #fff;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: "Baloo 2", sans-serif;
  font-size: 16px;
  font-style: normal;
  margin: auto 12px !important;
  font-weight: 800;
  line-height: 16px;
}

.no-underline {
  text-decoration: none !important;
}

/* Map Template */
.mapcontainer {
  display: flex;
  flex-direction: row; /* Lay items out in a row */
  flex-wrap: wrap;     /* Allow items to wrap to the next line */
  justify-content: center; /* Center the items in the container */
  border-radius: 10px;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10px; /* Add some padding to the container */
  box-sizing: border-box; /* Ensures padding doesn't affect total width */
}

/* We don't need .maprow anymore */

.mapbox {
  /* For mobile (2 columns): each item takes up ~50% of the width */
  /* flex: [grow] [shrink] [basis] */
  flex: 0 1 calc(50% - 20px); /* 50% width minus margin space */
  box-sizing: border-box;       /* Ensures border/padding is inside the calc() width */
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 93px; /* Start with mobile height */
  margin: 10px;
  color: white;
  font-family: 'Work Sans', sans-serif;
  background: none;
}

.mapbox a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center content vertically in the link */
}

.mapbox img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 70%; /* Start with mobile size */
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(2px 4px 3px black);
  opacity: 0;
  transform: scale(0);
}

.mapbox a:hover img {
  filter: brightness(1.2) saturate(1.3) drop-shadow(2px 4px 3px black);
  transform: scale(1.05);
}

.mapbox img.visible {
  animation: growAndBounce 1.5s forwards;
  animation-delay: calc(var(--order) * 0.2s);
}

.mapbox .label {
  opacity: 0;
  display: inline-block;
  pointer-events: none;
  position: relative;
  text-align: center;
  font-size: 18px; /* Start with mobile size */
  color: #fff;
  -webkit-text-stroke: 3px #000;
  font-weight: 700;
  font-family: 'Work Sans';
  text-shadow: 2px 2px 2px #000;
  paint-order: stroke fill;
}

.mapbox .label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 4px;
  border: 1px solid #000;
  width: 0%;
  background: #fff;
  transition: width 0.4s ease;
  transform-origin: left;
}

.mapbox a:hover .label::after {
  width: 100%;
}

.mapbox .label.visible {
  animation: fadeUp 1.5s forwards;
  animation-delay: calc(var(--order) * 0.2s);
}

/* Mobile styles are the default, but we add the background image here */
@media (max-width: 768px) {
  .mapcontainer {
    max-height: 619px;
    max-width: 100%;
    background-size: cover;
    background-image: url("https://thebonushunters.com/wp-content/uploads/2025/08/bonusmap-mobile.webp");
    gap:45px 0px;
  }
  .mapbox { order: 99; }
  .mapbox-spindlevine { order: 1; }
  .mapbox-vineswirl   { order: 2; }
  .mapbox-chipstone   { order: 3; }
  .mapbox-deposit     { order: 4; } 
  .mapbox-crypto      { order: 5; }
  .mapbox-cheerycherry{ order: 6; }
}
/* Desktop styles: 3 columns */
@media (min-width: 769px) {
  .mapcontainer {
    max-height: 655px;
    max-width: 1200px;
    background-size: contain;
    background-image: url("https://thebonushunters.com/wp-content/uploads/2025/06/BonusHuntersMapC3.webp");
  }
  
  .mapbox {
    /* For desktop (3 columns): each item takes up ~33.33% of the width */
    flex-basis: calc(33.33% - 20px); /* 33.33% width minus margin space */
    min-height: 300px;
  }
  
  .mapbox img {
    max-width: 50%;
  }

  .mapbox .label {
    font-size: 30px;
  }
}
@keyframes growAndBounce {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search Bar Styles - Keep these as they target specific plugin classes */
.asp_w_container_1 .ajaxsearchpro {
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.53) !important;
  backdrop-filter: blur(14.850000381469727px) !important;
  border-radius: 50px !important;
  padding: 5px 10px !important;
}

.asp_w_container_1 .promagnifier {
  background-image: none !important;
}

#ajaxsearchprores1_1.vertical,
#ajaxsearchprores1_2.vertical,
div.asp_r.asp_r_1.vertical {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.53) !important;
  backdrop-filter: blur(14.850000381469727px) !important;
  border-radius: 10px !important;
}

#ajaxsearchprores1_1.vertical .item,
#ajaxsearchprores1_2.vertical .item,
div.asp_r.asp_r_1.vertical .item {
  border-radius: 5px !important;
}

#ajaxsearchprores1_1 .results .item .asp_content h3 a,
#ajaxsearchprores1_2 .results .item .asp_content h3 a,
div.asp_r.asp_r_1 .results .item .asp_content h3 a {
  color: black !important;
  font-family: "Work Sans" !important;
}