/* PB Coverage Checker – Frontend styles */

.pbcc-wrap{
  max-width: 760px;
  margin: 0 auto;
}

/* Tabs */
.pbcc-tabs{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  margin: 0 0 18px 0;
  flex-wrap: wrap;
}

.pbcc-tab{
  min-width: 280px;
  padding: 14px 18px;
  border: 1px solid rgba(29,111,232,.35);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.1;
  color: #1d6fe8;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

.pbcc-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(29,111,232,.14);
}

.pbcc-tab.is-active{
  border-color: rgba(29,111,232,.55);
  background: #1d6fe8;
  color: #fff;
  box-shadow: 0 10px 28px rgba(29,111,232,.18);
}

.pbcc-tab:focus{
  outline: none;
}

.pbcc-tab:focus-visible{
  box-shadow: 0 0 0 3px rgba(29,111,232,.20), 0 10px 22px rgba(29,111,232,.14);
}

/* Panels */
.pbcc-tabpanels{
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  padding: 18px 18px 14px;
}

.pbcc-panel{display:none}
.pbcc-panel.is-active{display:block}

.pbcc-row{margin: 12px 0}

.pbcc-row-inputs,
.pbcc-row-region{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pbcc-label{
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

.pbcc-input{
  min-width: 220px;
  padding: 11px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  background: #fff;
}

.pbcc-select{
  min-width: 320px;
  padding: 11px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  background: #fff;
}

.pbcc-input:focus,
.pbcc-select:focus{
  outline: none;
}

.pbcc-input:focus-visible,
.pbcc-select:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}

.pbcc-btn{
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Primary action buttons (match CTA style) */
#pbcc-show,
#pbcc-show-region,
#pbcc-check{
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #1d6fe8;
  color: #fff;
  font-weight: 500;
  padding: 12px 16px;
}

#pbcc-show:hover,
#pbcc-show-region:hover,
#pbcc-check:hover{
  box-shadow: 0 10px 22px rgba(29,111,232,.22);
}

#pbcc-show:visited,
#pbcc-show-region:visited,
#pbcc-check:visited{color:#fff}

.pbcc-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.pbcc-btn:active{
  transform: translateY(0);
  box-shadow: none;
}

.pbcc-hint{
  margin-top: 10px;
  color: #566;
  font-size: 14px;
}

/* Results */
.pbcc-results{
  margin-top: 14px;
}

.pbcc-row-result{
  margin-top: 6px;
}

.pbcc-message{
  padding: 12px 14px;
  border-radius: 12px;
}

.pbcc-message.is-success{background:#ecfdf3;border:1px solid #a7f3d0}
.pbcc-message.is-error{background:#fef2f2;border:1px solid #fecaca}
.pbcc-message.is-info{background:#eff6ff;border:1px solid #bfdbfe}

.pbcc-note{
  margin-top: 8px;
  color: #555;
}

/* Cities section wrapper (make it stand out) */
.pbcc-row-cities{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #f6f9ff; /* subtle light background */
  border: 1px solid rgba(29,111,232,.12);
}

.pbcc-row-cities .pbcc-cities-title{
  margin-bottom: 10px;
}

/* CTA Banner (outside results) */
.pbcc-cta-banner{
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: #f2f5f8; /* subtle neutral background */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* CTA layout */
.pbcc-cta{ margin: 0; }
.pbcc-cta-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons (blue pill style) */
.pbcc-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(29,111,232,.35);
  background: #1d6fe8;
  color: #fff;
  -webkit-text-fill-color: #fff;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.pbcc-cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(29,111,232,.22);
}

.pbcc-cta-btn:active{
  transform: translateY(0);
  box-shadow: none;
}

.pbcc-cta-btn:focus{ outline: none; }
.pbcc-cta-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(29,111,232,.28), 0 10px 22px rgba(29,111,232,.22);
}

.pbcc-cta-btn,
.pbcc-cta-btn:visited,
.pbcc-cta-btn:hover,
.pbcc-cta-btn:active,
.pbcc-cta-btn:focus,
.pbcc-cta-btn:focus-visible{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.pbcc-cta-btn .pbcc-cta-phone{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.pbcc-cta-phone{ font-weight: 500; }

.pbcc-cta-phone{
  opacity: 1;
}

.pbcc-cta-subnote{
  margin-top: 10px;
  color: rgba(0,0,0,.72);
  font-size: 13px;
  text-align: center;
  width: 100%;
}

.pbcc-cities-title{font-weight: 700;margin-bottom: 6px}

.pbcc-cities{
  margin: 0;
  padding-left: 18px;

  /* columns */
  column-count: 2;
  column-gap: 26px;

  /* keep the results compact */
  max-height: 360px;

  /* vertical scroll only (avoid horizontal scrolling) */
  overflow-y: auto;
  overflow-x: hidden;

  /* prevent layout overflow */
  width: 100%;
  box-sizing: border-box;
}

.pbcc-cities li{
  margin: 4px 0;
  break-inside: avoid;
}

.pbcc-cities li{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pbcc-cities{
  scrollbar-width: thin;          /* Firefox */
}
.pbcc-cities::-webkit-scrollbar{
  width: 6px;
}
.pbcc-cities::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 6px;
}

@media (min-width: 980px){
  .pbcc-cities{column-count: 3;}
}

/* When only a few cities are shown, reduce the heavy scroll feel */
.pbcc-row-cities.pbcc-cities--short .pbcc-cities{
  max-height: none;
  overflow: visible;
}

@media (max-width: 640px){
  .pbcc-cities{
    column-count: 1;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Optional external map wrapper helpers */
.pbcc-map-wrap.pbcc-hidden{display:none}
.pbcc-map-wrap.pbcc-visible{display:block}

/* Responsive */
@media (max-width: 640px){
  .pbcc-tabs{gap: 10px}
  .pbcc-tab{min-width: 0; width: 100%}

  .pbcc-row-inputs,
  .pbcc-row-region{
    flex-direction: column;
    align-items: stretch;
  }

  .pbcc-input,
  .pbcc-select{min-width: 0; width: 100%}
  .pbcc-btn{width: 100%}

  .pbcc-cta-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .pbcc-cta-btn{
    width: 100%;
  }
}