/* custom styles */
:root{
  --bh-ink:#222;
  --green-1:#7cd64a; --green-2:#3AAE08; --green-3:#2a7b05;
  --gold-1:#fddc63; --gold-2:#eeb135; --gold-3:#c97b13;
  --lgreen-1:#cbfec33d;
  --lgreen-2:#cceccd3b;
  --lgreen-3:#a4d9a330;
  --olive-brdr:#82a708;
  --olive-txt:#54663a;
}
.currency-symbol {
    font-size: 1.2em;
    position: relative;
    top: 1px;
}
/* Utility Classes */

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

.work-sans-base {
  /* font-family: "Work Sans", sans-serif; */
  font-family: "Archivo", sans-serif;
}
.poppins-base {
  font-family: "Archivo", sans-serif;
  letter-spacing:0.5px;
}

.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-family: "Roboto", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  text-transform: uppercase;
  text-decoration: none;
}
.treasure-btn {
  background: linear-gradient(180deg, #fddc63 0%, #eeb135 50%, #c97b13 100%);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 9999px; /* pill shape */
  padding: 10px 24px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* room for icon if needed */
  text-decoration: none;
   text-shadow: 1px 2px 3px #00000047;
}

.treasure-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.treasure-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
/* ---------- Base ---------- */
.btn{
  -webkit-font-smoothing:antialiased;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.75rem; /* 15px */
  line-height: 1.2;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  text-decoration:none;
  border:0;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 1.4rem; /* md default */
  box-shadow:0 4px 6px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.6);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); filter:brightness(.98); }
.btn:focus-visible{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; }

/* sizes if needed */
.btn--sm{ padding:.5rem 1rem; font-size:.875rem; }
.btn--lg{ padding:1rem 1.4rem; font-size:1.75rem; }
.btn--block{ width:100%; display:flex; }

/* ---------- Variants ---------- */

/* A) Map “treasure” (keep for dark/map section only) */
.btn--gold{
  color:#fff;
  background:linear-gradient(180deg,var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
  text-shadow:1px 2px 3px rgba(0,0,0,.28);
}
.btn--gold:hover{
  filter:brightness(1.07);
  box-shadow:0 6px 10px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.6);
}

/* B) NEW: Expedition (neutral) — for “Load / Show More / See All” */
.btn--expedition{
  color:var(--olive-txt);
  background:linear-gradient(180deg, var(--lgreen-1) 0%, var(--lgreen-2) 60%, var(--lgreen-3) 100%);
  border:1px solid var(--olive-brdr);
  box-shadow:0 3px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
  text-shadow:none;
}
.btn--expedition:hover{
  filter:brightness(1.03);
  box-shadow:0 6px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.95);
}

/* (reference) your Visit Casino stays green on the cards */
.btn--green{
  color:#fff;
  background:linear-gradient(180deg,var(--green-1) 0%, var(--green-2) 60%, var(--green-3) 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}

.custom-homepage .h1-hero {
  text-align: center;
  /* font-family: "Baloo 2", sans-serif; */
font-family: "Roboto", sans-serif;
  color: #ffffff;
 webkit-text-stroke: 0.25px #000000;
    text-shadow: -1px 1px 15px #00000080;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15));
}

.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; */
  font-family: "Roboto", 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-family: "Roboto", sans-serif;
  font-size: 16px;
  font-style: normal;
  margin: auto 12px !important;
  font-weight: 800;
  line-height: 16px;
}
@media (min-width:769px) {
.custom-homepage .h1-hero {
  font-size: 60px !important;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 1px;
}
.map-scene__frame > a[href*="bonuses"] {
  position:relative;
  top:-50px;
  display: block !important;
  margin: 0 auto !important;
  text-align: center;
  width: fit-content;          /* shrink-wrap the button */
}
}
@media (max-width:768px) {
.custom-homepage .h1-hero {
  font-size: 30px !important;
  font-weight: 900;
  line-height: 30px;
  letter-spacing: 1px;
  margin-top:0px !important;
}
}
.no-underline {
  text-decoration: none !important;
}
/* Map Container */
/* Outer section color so ultra-wide screens blend nicely */
.map-scene {
  background: #3b2a1f;
  /* optional soft vignette so the frame pops */
  position: relative;
}
.map-scene::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 160px rgba(0,0,0,.25);
}
@media (min-width: 769px) {
/* The wooden desk “frame” that surrounds your existing mapcontainer */
.map-scene__frame{
  --desk-img: url("https://staging.thebonushunters.com/wp-content/uploads/2025/10/bonushuntersmaplarge.webp"); /* ← your desk image */
  margin: clamp(16px,3vw,28px) auto;
  padding: clamp(12px, 0vw, 28px);/* how much desk shows around the map */
  background: var(--desk-img) center/cover no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;                 /* rounds the desk edges cleanly */
}
}
@media (max-width: 768px) {
/* The wooden desk “frame” that surrounds your existing mapcontainer */
.map-scene__frame{
  --desk-img: url("https://staging.thebonushunters.com/wp-content/uploads/2025/10/mobilemap3.webp"); /* ← your desk image */
  margin: clamp(16px,3vw,28px) auto;
  padding: 5% 0 !important;/* how much desk shows around the map */
  background: var(--desk-img) center/cover no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background-position:top;
  overflow: hidden;                 /* rounds the desk edges cleanly */
}
.map-scene__frame > a[href*="bonuses"] {
  display: block !important;
  margin: 15% auto 5% auto !important;
  text-align: center;
  width: fit-content;          /* shrink-wrap the button */
}
}
/* Optional: fade the desk horizontally so it melts into page bg on huge screens */
.map-scene__frame::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
/* Make sure your existing mapcontainer sits edge-to-edge inside the desk */
.map-scene .mapcontainer{
  margin: 0;            /* override any external margins so the padding shows as “desk” */
  width: 100%;
}
/*End Map Container */
/* 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 !important;
  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; */
  font-family: "Roboto", 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 {
    transform: translateY(-3px) scale(1.05) !important;
  filter: brightness(1.15) saturate(1.15) drop-shadow(0 6px 8px rgba(0,0,0,.4));
  transition: transform 0.3s cubic-bezier(0.25,1,0.3,1),
              filter 0.25s ease-out;
}

.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: 20px; /* Start with mobile size */
  line-height:26px;
  color: #fff;
  -webkit-text-stroke: 1.5px rgba(0,0,0,.55);     /* thin edge */
  font-weight: 800;
  font-family: "Archivo", sans-serif;
  text-shadow:
    0 2px 2px rgba(0,0,0,.55),                    /* tight shadow */
    0 0 8px rgba(0,0,0,.40),                      /* soft halo */
    0 0 14px rgba(0,0,0,.30);                     /* wider halo */
  paint-order: stroke fill;
}

.mapbox .label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  border: none;
  width: 0%;
  background: linear-gradient(90deg,#ffe27a 0%,#fff1b8 50%,#ffe27a 100%);
  box-shadow:0 0 6px rgba(255,233,140,.35);
  transition: width .38s cubic-bezier(.25,1,.3,1);
}
.mapbox a:hover .label {
  text-shadow:
    0 2px 3px rgba(0,0,0,.65),
    0 0 10px rgba(255,240,180,.35);
}
.mapbox a:hover .label::after {
  width: 100%;
}

.mapbox .label.visible {
  animation: fadeUp 1.5s forwards;
  animation-delay: calc(var(--order) * 0.2s);
}
.mapbox-spindlevine .label{
  -webkit-text-stroke: 2.25px rgba(0,0,0,.78);   /* a touch thicker */
  text-shadow:
    0 2px 3px rgba(0,0,0,.75),
    0 0 10px rgba(0,0,0,.45),
    0 0 18px rgba(0,0,0,.35);
}

/* Mobile styles are the default, but we add the background image here */
@media (max-width: 768px) {
  .mapcontainer {
    max-height: 619px;
    max-width: 100%;
    gap: 10px 0px;
    margin:17% auto !important;
  }
  .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;
    margin: 3% auto 10% auto !important;
  }
  .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: 2px solid rgba(255, 255, 255, 0.4) !important;
background: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(5px); /* This creates the frosted glass effect */
-webkit-backdrop-filter: blur(5px); /* For Safari compatibility */
  border-radius: 50px !important;
  padding: 7px 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; */
  font-family: "Archivo", sans-serif;
}

/* HERO SECTION FORM */
/* Search Bar Styles - Keep these as they target specific plugin classes */
.asp_w_container_2 .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_2 .promagnifier {
  background-image: none !important;
}

#ajaxsearchprores2_1.vertical,
#ajaxsearchprores2_2.vertical,
div.asp_r.asp_r_2.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;
}

#ajaxsearchprores2_1.vertical .item,url(https://staging.thebonushunters.com/wp-content/uploads/2025/07/parrot.webp)
#ajaxsearchprores2_2.vertical .item,
div.asp_r.asp_r_2.vertical .item {
  border-radius: 5px !important;
}

#ajaxsearchprores2_1 .results .item .asp_content h3 a,
#ajaxsearchprores2_2 .results .item .asp_content h3 a,
div.asp_r.asp_r_2 .results .item .asp_content h3 a {
  color: black !important;
  /* font-family: "Work Sans" !important; */
  font-family: "Archivo", sans-serif;
}

/* === Header: 3-zone flex bar =========================================== */
#site-header .header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

/* Left: logo + mobile toggles */
#site-header .header-titles-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0; /* override TT spacing */
}

/* Make the logo behave (adjust to your logo size) */
.header-titles .site-logo img,
.header-titles .site-logo svg {
  max-height: 100px;
  height: 100px;
  width: auto;
}

/* Center: primary menu takes leftover space */
#site-header .header-navigation-wrapper {
  flex: 1 1 auto;
  min-width: 0; /* prevents overflow */
}

/* Keep the UL horizontal and centered */
#site-header .primary-menu.reset-list-style {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap; /* wraps on small desktops */
}

/* Right: icons block sticks to the far right */
#site-header .header-navigation-right {
  margin-left: auto; /* pushes it to the edge */
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Icon buttons look tidy */
.header-navigation-right .icon-btn .icon-img {
  display: block;
  width: 28px;
  height: 28px;
}

/* Give the header more breathing room */
.header-footer-group .header-inner.section-inner {
  max-width: 1600px; /* wider container */
  padding-left: 20px; /* keep some padding so logo isn’t glued to edge */
  padding-right: 20px; /* balance right side */
}

/* Ensure the logo hugs left */
#site-header .header-titles-wrapper {
  margin-left: 0;
}

/* If you want logo *exactly* flush with browser edge */
body:not(.admin-bar) #site-header .header-inner {
  padding-left: 0; /* remove extra space entirely */
}

#site-header .header-navigation-wrapper nav.primary-menu-wrapper {
  width: 100%;
}

/* Hide the desktop menu on small screens; show hamburger */
@media (max-width: 980px) {
  /* Menu collapses */
  #site-header .header-navigation-wrapper {
    display: none;
  }

  .header-navigation-right {
    display: none !important;
  }

  /* Keep the mobile menu toggle visible */
  #site-header .mobile-nav-toggle {
    display: inline-flex;
  }

  /* Optional: shrink right side / hide large items on mobile */
  .header-navigation-right .offers-button {
    display: none;
  } /* if too big */
  .header-navigation-right nav ul {
    gap: 8px;
  }
}

/* On larger screens, hide the mobile toggle if you wish */
@media (min-width: 981px) {
  #site-header .mobile-nav-toggle {
    display: none;
  }
}
#site-header.scrolled {
  position: fixed;
  background: rgba(30, 55, 18, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Adjust content padding to prevent jump when header becomes fixed */
body {
  padding-top: 0;
  transition: padding-top 0.3s ease;
}

body.header-scrolled {
  padding-top: 80px; /* Adjust this value to match your header height */
  z-index: 999;
}

body.header-scrolled.section-inner {
  margin-top: 0;
}

/* Hide the desktop menu on small screens; show hamburger */
@media (max-width: 980px) {
  .header-navigation-right {
    display: none !important;
  }
}