/* =========================================================
   BCARD Directory + BLAZ Favourites (Unified)
   - Map + filters + popup
   - Favourite (heart) button states
   - Saved Pins page cards
   ========================================================= */

/* ==== Directory basics ==== */
.bcard-dir-wrap{position:relative}
#bcard-directory-map{
  width:100%;
  height:560px;
  border-radius:8px;
  overscroll-behavior:contain;
}

/* Hide tier dropdown if you don't want it visible */
#f-tier{display:none}

/* ==== Filter bar ==== */
.bcard-filters{
  position:absolute;
  top:10px;
  left:8px;
  z-index:20;

  display:flex;
  align-items:center;
  gap:6px;

  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;

  max-width:calc(100% - 88px);

  background:rgba(255,255,255,0.9);
  padding:6px 8px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.bcard-filters select{
  -webkit-appearance:none;
  appearance:none;
  background:#007286;
  color:#fff;

  padding:5px 5px;
  padding-right:10px;

  font-size:13px;
  font-weight:500;
  border:none;
  border-radius:6px;
  cursor:pointer;

  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-size:16px;
  background-position:right 5px center;
  min-width:80px;
}
.bcard-filters select:hover,
.bcard-filters select:focus{background:#005f66;outline:none}
.bcard-filters button{
  padding:4px 6px;
  font-size:13px;
  font-weight:600;
  border-radius:5px;
  border:none;
  cursor:pointer;
  color:#fff;
}
/* Search input refined */
.bcard-filters input{
  background:#fff;
  border:0 !important;
  outline:none;
  box-shadow:none;

  font-size:14px;
  padding:3px 5px;

 border-radius:8px !important;
  min-height:30px;

  /* remove fixed width so flex controls sizing */
}

/* remove browser blue glow */
.bcard-filters input:focus{
  outline:none;
  box-shadow:none;
}

.bcard-filters #f-apply{background:#ff0064}
.bcard-filters #f-clear{background:#64748b}

/* Larger filter controls (desktop) */
.bcard-filters select,
.bcard-filters input,
.bcard-filters button{
  font-size:14px;
  padding:3px 5px;
  border-radius:8px;
  min-height:30px;
}

/* Mobile refinements */
@media (max-width:680px){

  .bcard-filters{
    max-width:calc(48% - 30px);
    padding:6px 6px;
    gap:4px;
    flex-wrap:wrap;
    white-space:normal;
    overflow-x:visible;
  }

  .bcard-filters select,
  .bcard-filters input,
  .bcard-filters button{
    font-size:13px;
    padding:6px 8px;
    min-height:28px;
    border-radius:6px;
  }

  .bcard-filters select,
  #f-search{
    flex:1 1 100%;
 border-radius:8px !important;

  }

  #f-apply,
  #f-clear{
    flex:1 1 48%;
  }

}

/* Nudge built-in map controls */
.maplibregl-ctrl-top-right{ margin:8px 8px 0 0; z-index:15 }

/* ==== Popup card ==== */
.maplibregl-popup-content{
  max-width:320px;
  padding:12px 16px 14px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.bcard-popup{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
}

/* Popup close: X only, no box */
.maplibregl-popup .maplibregl-popup-close-button{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  padding:0;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;

  color:#9ca3af;
  font-size:18px;
  font-weight:600;
  line-height:1;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;

  transition:color .18s ease;
}
.maplibregl-popup .maplibregl-popup-close-button:hover,
.maplibregl-popup .maplibregl-popup-close-button:active,
.maplibregl-popup .maplibregl-popup-close-button:focus,
.maplibregl-popup .maplibregl-popup-close-button:focus-visible{
  background:none !important;
  box-shadow:none !important;
  color:#ff0064;
  outline:none;
}

/* Popup logo (larger + responsive) */
.bcard-pop-logo{
  width:clamp(120px, 35vw, 200px);
  height:clamp(90px, 25vw, 140px);
  margin:0 0 10px;
  border-radius:12px;
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.bcard-pop-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:10px;
  display:block;
  transform:translateZ(0) scale(1);
  transition:transform .18s ease;
}
.bcard-popup:hover .bcard-pop-logo img{
  transform:translateZ(0) scale(1.04);
}

.bcard-popup strong{
  display:block;
  margin:2px 0 6px;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
}
.bcard-popup small{
  color:#4b5563;
  display:block;
  margin:0 0 10px;
}

.bcard-popup a.bcard-popup-link{
  display:block;
  width:100%;
  max-width:240px;
  margin-top:10px;
  padding:10px 12px;
  text-align:center;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color:#fff;
  background:#007286;
  border-radius:6px;
}

/* ==== Style switcher ==== */
.bcard-style-switcher{
  display:flex;
  gap:2px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  padding:2px;
  margin:10px;
}
.bcard-style-switcher button{
  border:none;
  background:none;
  color:#007286;
  font:600 12px/1 system-ui;
  padding:6px 8px;
  border-radius:4px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.bcard-style-switcher button:hover{ background:#f0f0f0 }
.bcard-style-switcher button.active{ background:#FF0064;color:#fff }

/* Allow JS to flip touch-action during gestures */
.maplibregl-canvas,
.maplibregl-canvas-container{ touch-action:auto }

/* Subtle hover for built-in controls */
.maplibregl-ctrl button:not(:disabled):hover{ background-color:#007286 }

/* ==== Attribution tweaks ==== */
.maplibregl-ctrl-attrib a[href*="openstreetmap.org"]{ font-size:0; }
.maplibregl-ctrl-attrib a[href*="openstreetmap.org"]::after{
  content:"OpenStreetMap";
  font-size:10px;
  line-height:1;
  color:inherit;
}
.maplibregl-ctrl-attrib a[href*="maptiler.com"]{ font-size:10px; }

/* =========================================================
   Favourite (heart) button (Map Popup)
   - Button HTML is text-only:
     <button class="blaz-fav-btn blaz-fav-saved" data-saved="0|1">Saved</button>
   - We draw the heart via ::before
   - Unsaved: grey outline heart + grey text
   - Saved: solid BLAZ pink heart + pink text
   - Hover: NEVER forces white; only color changes
   ========================================================= */

.bcard-popup .blaz-fav-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  padding:0;
  margin-top:10px;

  width:100%;
  max-width:240px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  cursor:pointer;
  line-height:1;
  box-shadow:none !important;
  outline:none !important;

  color:#9ca3af;          /* unsaved grey text */
  font-weight:600;

  transition:color .18s ease;
}

.bcard-popup .blaz-fav-btn::before{
  content:"♡";
  font-size:22px;
  line-height:1;
  color:currentColor;     /* follows button color */
  transition:color .18s ease;
}

/* Saved state: class or attribute */
.bcard-popup .blaz-fav-btn.blaz-fav-saved,
.bcard-popup .blaz-fav-btn[data-saved="1"]{
  color:#ff0064;          /* BLAZ pink */
}
.bcard-popup .blaz-fav-btn.blaz-fav-saved::before,
.bcard-popup .blaz-fav-btn[data-saved="1"]::before{
  content:"♥";
}

/* Hover/focus/active: keep transparent, never white */
.bcard-popup .blaz-fav-btn:hover,
.bcard-popup .blaz-fav-btn:focus,
.bcard-popup .blaz-fav-btn:active{
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none;
}

/* Unsaved hover: slightly darker grey */
.bcard-popup .blaz-fav-btn:not(.blaz-fav-saved):not([data-saved="1"]):hover,
.bcard-popup .blaz-fav-btn:not(.blaz-fav-saved):not([data-saved="1"]):focus{
  color:#6b7280;
}

/* Saved hover: stay pink */
.bcard-popup .blaz-fav-btn.blaz-fav-saved:hover,
.bcard-popup .blaz-fav-btn.blaz-fav-saved:focus,
.bcard-popup .blaz-fav-btn[data-saved="1"]:hover,
.bcard-popup .blaz-fav-btn[data-saved="1"]:focus{
  color:#ff0064;
}


/* Saved Pins link under the button */
.bcard-popup .blaz-view-saved,
.bcard-popup .blaz-saved-link,
.bcard-popup a[href*="saved-pins"]{
  display:block;
  width:100%;
  max-width:240px;
  margin-top:8px;
  text-align:center;
  font-size:13px;
  text-decoration:underline;
  color:#ffffff;
  background:#ff0064;
  padding:10px;
  border-radius:5px;
}
.bcard-popup .blaz-view-saved:hover,
.bcard-popup .blaz-saved-link:hover,
.bcard-popup a[href*="saved-pins"]:hover{
  background:#e00058;
  color:#ffffff;
}


/* =========================================================
   Saved Pins page layout (shortcode output)
   ========================================================= */

.blaz-saved-pins{
  max-width:660px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.blaz-saved-pin{
  background:#fff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 10px rgba(15, 23, 42, 0.06);
  padding:14px 16px;
}
.blaz-saved-pin-inner{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.blaz-saved-pin-logo{
  flex:0 0 92px;
  max-width:92px;
}
.blaz-saved-pin-logo img{
  width:92px;
  height:92px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}
.blaz-saved-pin-body{ flex:1 1 auto; }
.blaz-saved-pin-title{
  margin:0 0 4px;
  font-size:16px;
  font-weight:600;
  color:#111827;
}
.blaz-saved-pin-address{
  margin:0 0 10px;
  font-size:14px;
  color:#4b5563;
}

.blaz-saved-pin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.blaz-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  line-height:1.4;
}
.blaz-button--primary{
  background:#ff0064;
  border-color:#ff0064;
  color:#fff;
}
.blaz-button--primary:hover{
  background:#e00058;
  border-color:#e00058;
  color:#f6f6ff;
}
.blaz-button--secondary{
  background:#fff;
  border-color:#d1d5db;
  color:#374151;
}
.blaz-button--secondary:hover{ background:#f3f4f6; }

@media (max-width:640px){
  .blaz-saved-pin-logo{ flex:0 0 72px; max-width:72px; }
  .blaz-saved-pin-logo img{ width:72px; height:72px; }
}

/* Ensure popups sit above Elementor sections */
.maplibregl-popup{ z-index:9000; min-width:250px; }

.maplibregl-popup,
.maplibregl-popup-pane{
  z-index:999999 !important;
}
.elementor-section,
.elementor-widget-container{
  overflow:visible !important;
}