/*Beer Finder CSS*/
/* Custom Styles for VIP iFrame
 * ----------------------------------*/

/* 0) Load your custom font (ensure CORS allows https://finder.vtinfo.com) */
@font-face {
  font-family: 'neue-aachen-pro';
  src: url('https://breckbrew-staging.azurewebsites.net/wp-content/themes/break-brew/fonts/aachen_bt.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 1) Brand variables (your palette) */
:root{
    --brand-bg:#16232B;            /* panel background */
    --brand-mid:#1E2E38;           /* inputs / hover */
    --brand-accent:#E35205;        /* primary / badges */
    --brand-accent-hover:#C34104;  /* primary hover */
    --brand-text:#EEE6CD;          /* text */
    --brand-white:#FFFFFF;
    --text-upper: uppercase;
}

/* 2) Critical theme-scoped backgrounds (as in your example) */
/* Works for both bs-superhero and bs-simplex */
body.THEME_bs-superhero .card,
body.THEME_bs-superhero .badge.bg-dark,
body.THEME_bs-superhero .gm-style .gm-style-iw-c,
body.THEME_bs-superhero .gm-style .gm-style-iw-t::after,
body.THEME_bs-simplex .card,
body.THEME_bs-simplex .badge.bg-dark,
body.THEME_bs-simplex .gm-style .gm-style-iw-c,
body.THEME_bs-simplex .gm-style .gm-style-iw-t::after {
  background: var(--brand-bg);
}

/* Ensure all panel text uses your font + color */
body.THEME_bs-superhero,
body.THEME_bs-simplex,
body.THEME_bs-superhero *:not(i):not(.bi):not([class*="fa-"]):not(.material-icons),
body.THEME_bs-simplex *:not(i):not(.bi):not([class*="fa-"]):not(.material-icons) {
  font-family: 'neue-aachen-pro', sans-serif !important;
  color: var(--brand-text) !important;
}

/* 3) Finder card container radius */
#finder_cards {
  border-radius: 5px;
}

/* 4) Form Inputs (match structure from your example) */
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Geolocation pin */
#finder_geolocation_button {
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* VIP dynamic menus */
.form-control.finder_dynamic_menu.filter-options {
  border-radius: 5px;
  color: var(--brand-text);
}

/* Global form font (inside panel) */
.form-control, .control-label {
  font-family: 'neue-aachen-pro', sans-serif;
  font-weight: 400;
}

/* Additional elements using the same font */
#miles .btn, .nav-tabs .nav-link, .btn-link, .finder-no-results-server-message {
  font-family: 'neue-aachen-pro', sans-serif;
  font-weight: 400;
}

#miles .btn {
  font-weight: 700;
}

.btn-link {
  color: var(--brand-white);
}

/* 5) Inputs visual style */
.form-control,
.form-select {
  background-color: var(--brand-mid);
  color: var(--brand-text);
  border: 1px solid var(--brand-accent);
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-accent);
  box-shadow: none;
  outline: none;
}
::placeholder { color: #D9D0B5; opacity: 1; }

/* Remove the border “box” look around Near + Within */
.input-group .form-control,
.input-group .form-select,
.input-group .input-group-text,
.input-group .btn,
.input-group .btn-outline-primary {
  border: none !important;
  box-shadow: none !important;
  background-color: var(--brand-mid) !important;
  color: var(--brand-text) !important;
}

/* 6) Buttons */
.btn-primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  border-radius: 5px;
  padding: 4px 15px;
  font-family: 'neue-aachen-pro', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: var(--text-upper);
}

/* Disabled + Hover (kept from your example but with your colors) */
.btn-primary.disabled, .btn-primary:disabled, .btn-primary:hover  {
  background-color: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
}

.btn-secondary {
  padding: 4px 15px;
  font-size: 20px;
}

/* Outline primary */
.btn-outline-primary {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  border-radius: 5px;
  font-family: 'neue-aachen-pro', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: var(--text-upper);
}
.btn-outline-primary:hover, .btn-outline-primary:disabled {
  border-color: var(--brand-accent);
  background-color: transparent;
}

/* Secondary / states */
.btn-secondary, .btn-check:active+.btn-outline-secondary, .btn-check:checked+.btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active {
  color: #fff;
  background-color: var(--brand-mid);
  border-color: var(--brand-mid);
}

/* 7) Location Results */
body.THEME_bs-superhero hr,
body.THEME_bs-simplex hr { 
  border-color: var(--brand-bg);
}

#finder_results_nav_container { padding: 0; }
.nav-tabs { border-bottom: none; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--brand-mid);
  border-color: var(--brand-mid);
}
.nav-tabs .nav-link { font-weight: 900; }

#finder_results { margin: 0; }

.card.border-primary {
  border: none;
  border-bottom: 1px solid var(--brand-mid);
}
.border-primary { border-color: var(--brand-mid) !important; }

.card { padding: 1rem 1rem 0 1rem; }

body.THEME_bs-superhero .badge.bg-dark, 
body.THEME_bs-superhero .card-header,
body.THEME_bs-simplex .badge.bg-dark, 
body.THEME_bs-simplex .card-header {
  background: transparent;
}

.badge.bg-dark.finder_num { background: var(--brand-accent); }

.finder_location .finder_dba_text, 
.finder_map_result_header .finder_dba_text, 
.h4, h4 {
  font-family: 'neue-aachen-pro', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

.finder_store_info {
  font-family: 'neue-aachen-pro', sans-serif;
  letter-spacing: .02em;
  font-size: 16px;
  font-weight: 700;
}

.badge.bg-dark.finder_num {
  background: var(--brand-accent) !important;
  border-radius: 100%;
  width: 21px;
  height: 21px;
  display: block;
  padding: 0;
  line-height: 21px;
  min-width: 21px;
  font-size: 12px;
  margin: 0 15px 0 5px;
  font-family: 'neue-aachen-pro', sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
}

.fs-5 { font-size: 13px !important; }

.finder_miles.fw-bold.float-end { float: none !important; }

.alert-warning {
  background-color: var(--brand-bg);
  text-align: center;
}

#finder-no-results-server-message { padding: 0 !important; }

/* Hover row */
.finder_row.mb-3 { margin-bottom: 0 !important; }
.finder_row:hover { background: var(--brand-mid) !important; }

.card-header { border-bottom: none; }

/* Hover links */
.finder_location .finder_dba_text:hover, 
.finder_map_result_header .finder_dba_text:hover, 
.finder_address_container a:hover, 
finder_phone a:hover, 
.finder_phone *:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* 8) Info Window */
.gm-style-iw-chr button {
  position: absolute !important;
  right: 0;
}
.gm-style .gm-style-iw-d { padding: 18px 30px 20px; }

/* Pointer background for both themes */
.gm-style .gm-style-iw-tc::after {
  background: var(--brand-bg);
}

#finder-no-results-server-message {
  text-align: center;
  font-size: 15px;
  padding: 20px 0 10px;
}

/* 9) Responsive */
@media only screen and (min-width: 900px) {
  .card-body { padding-top: 0; }
}
@media only screen and (max-width: 641px) {
  #finder_cards.card { padding: 0; }
  .secondary-nav:not(.active) { background: #6e86a2; }
}