/* =================================================================
   BCP Home Page CSS -- Understrap Child v3.0.0
   Extracted from cmvp-home-preview.html v11
   ================================================================= */

/* ═══════════════════════════════════════════════════════════════════
   SERVICES GRID
   ═══════════════════════════════════════════════════════════════════ */
.bcp-services {
  padding: 20px 16px 24px;
  background: #fff;
}
.bcp-services__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--bcp-purple);
  margin-bottom: 4px;
}
.bcp-services__heading::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--bcp-sky-dark);
  border-radius: 2px;
  margin-top: 4px;
}
.bcp-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* Tile base */
.bcp-tile {
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid;
  background: #fff;
  position: relative;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.bcp-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.bcp-tile__bar { height: 6px; width: 100%; }
.bcp-tile__body { padding: 12px 14px 14px; }
.bcp-tile__icon { margin-bottom: 6px; }
.bcp-tile__icon svg { width: 22px; height: 22px; }
.bcp-tile__title { font-size: 12px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.bcp-tile__sub { font-size: 10px; color: #555; line-height: 1.4; }
.bcp-tile__arrow { position: absolute; bottom: 10px; right: 12px; font-size: 13px; font-weight: 700; }

/* Service colour themes */
.bcp-tile--recycling { border-color: #026928; color: #026928; background: #e8f5e9; }
.bcp-tile--recycling .bcp-tile__bar   { background: #026928; }
.bcp-tile--recycling .bcp-tile__arrow { color: #026928; }

.bcp-tile--purple { border-color: #361E54; color: #361E54; background: #f3eeff; }
.bcp-tile--purple .bcp-tile__bar   { background: #361E54; }
.bcp-tile--purple .bcp-tile__arrow { color: #361E54; }

.bcp-tile--parking { border-color: #0F398B; color: #0F398B; background: #e8eef8; }
.bcp-tile--parking .bcp-tile__bar   { background: #0F398B; }
.bcp-tile--parking .bcp-tile__arrow { color: #0F398B; }

.bcp-tile--amber { border-color: #854F0B; color: #854F0B; background: #faeeda; }
.bcp-tile--amber .bcp-tile__bar   { background: #854F0B; }
.bcp-tile--amber .bcp-tile__arrow { color: #854F0B; }

.bcp-tile--housing { border-color: #185FA5; color: #185FA5; background: #e6f1fb; }
.bcp-tile--housing .bcp-tile__bar   { background: #185FA5; }
.bcp-tile--housing .bcp-tile__arrow { color: #185FA5; }

.bcp-tile--pink { border-color: #993556; color: #993556; background: #fbeaf0; }
.bcp-tile--pink .bcp-tile__bar   { background: #993556; }
.bcp-tile--pink .bcp-tile__arrow { color: #993556; }

.bcp-tile--teal { border-color: #0F6E56; color: #0F6E56; background: #e1f5ee; }
.bcp-tile--teal .bcp-tile__bar   { background: #0F6E56; }
.bcp-tile--teal .bcp-tile__arrow { color: #0F6E56; }

.bcp-tile--sky { border-color: #05B4EB; color: #05B4EB; background: #e6f7fd; }
.bcp-tile--sky .bcp-tile__bar   { background: #05B4EB; }
.bcp-tile--sky .bcp-tile__arrow { color: #05B4EB; }

.bcp-tile--green { border-color: #3B6D11; color: #3B6D11; background: #eaf3de; }
.bcp-tile--green .bcp-tile__bar   { background: #3B6D11; }
.bcp-tile--green .bcp-tile__arrow { color: #3B6D11; }

/* ═══════════════════════════════════════════════════════════════════
   MOVING HOME / TOURISM BANNERS
   ═══════════════════════════════════════════════════════════════════ */
.bcp-banner {
  padding: 28px 20px;
  position: relative;
  overflow: hidden;
}
.bcp-banner--moving  { background: var(--bcp-purple); }
.bcp-banner--tourism { background: var(--bcp-sky-dark); }
/* bcp-banner--moving hides the accent bar */
.bcp-banner--moving .bcp-banner__accent { display: none; }

.bcp-banner__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--bcp-sky-dark);
}
.bcp-banner--tourism /* bcp-banner--moving hides the accent bar */
.bcp-banner--moving .bcp-banner__accent { display: none; }

.bcp-banner__accent { background: var(--bcp-purple); }
.bcp-banner__heading {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.bcp-banner__text {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin-bottom: 14px;
  line-height: 1.5;
}
.bcp-banner__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bcp-banner__pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.bcp-banner__pill:hover { background: rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════════════════════
   TRANSLATION WIDGET
   ═══════════════════════════════════════════════════════════════════ */
.bcp-banner--tourism .bcp-banner__heading,
.bcp-banner--tourism .bcp-banner__text {
  color: #1a2a5e;
}
.bcp-banner--tourism .bcp-banner__pill {
  background: rgba(255,255,255,.9);
  border-color: #1a2a5e;
  color: #1a2a5e;
}
.bcp-banner--tourism .bcp-banner__pill:hover {
  background: #fff;
  border-color: #1a2a5e;
  color: #1a2a5e;
}

.bcp-translate { background: #1a1a2e; padding: 16px 20px; }
.bcp-translate__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bcp-translate__icon {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: Georgia,serif;
}
.bcp-translate__icon span { opacity: .6; font-size: 11px; font-family: system-ui,sans-serif; }
.bcp-translate__title { font-size: 13px; font-weight: 700; color: #fff; }
.bcp-translate__sub { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 1px; }
.bcp-translate__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bcp-translate__pill {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10px;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.bcp-translate__pill:hover { background: rgba(255,255,255,.18); }
.bcp-translate__pill--active {
  background: var(--bcp-sky-dark);
  border-color: var(--bcp-sky-dark);
  font-weight: 700;
  color: #fff;
}
.bcp-translate__pill--more {
  border-style: dashed;
  color: rgba(255,255,255,.4);
  border-color: rgba(255,255,255,.15);
}
.bcp-translate__credit { font-size: 9px; color: rgba(255,255,255,.3); margin-top: 10px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bcp-services__grid { grid-template-columns: 1fr 1fr; }
  .bcp-banner__heading { font-size: 15px; }
}
@media (max-width: 380px) {
  .bcp-services__grid { grid-template-columns: 1fr; }
}

/* -- Back to top ------------------------------------------------- */
.bcp-back-to-top {
  position: fixed;
  bottom: 28px;
  right: 80px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bcp-purple);
  border: 2px solid var(--bcp-sky-dark);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: opacity .25s, transform .25s, background .15s;
  z-index: 300;
  /* Hidden by default -- JS adds bcp-btt--visible to show */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  visibility: hidden;
}
.bcp-back-to-top.bcp-btt--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.bcp-back-to-top:hover { background: var(--bcp-purple2); }
.bcp-back-to-top:focus { outline: 3px solid var(--bcp-sky-dark); outline-offset: 2px; }

/* =================================================================
   CMVP Rating Widget CSS -- v3.0.0
   ================================================================= */

.cmvp-rating {
  background: #fff;
  border: 1px solid #e2ddf0;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  width: 100%;
  box-shadow: 0 4px 20px rgba(54,30,84,.08);
}
.cmvp-rating__header {
  background: #361E54;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmvp-rating__title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}
.cmvp-rating__badge { display: none; }
.cmvp-rating__body { padding: 18px 20px; }

/* Summary */
.cmvp-rating__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f7f6fb;
  border: 1px solid #e2ddf0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.cmvp-rating__avg {
  font-size: 38px;
  font-weight: 700;
  color: #361E54;
  line-height: 1;
  font-family: Georgia, serif;
}
.cmvp-rating__avg-stars { display: flex; gap: 2px; margin-bottom: 3px; }
.cmvp-rating__count { font-size: 11px; color: #6b6580; }

/* Dimension bars */
.cmvp-dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}
.cmvp-dim-row__label { min-width: 110px; color: #6b6580; }
.cmvp-dim-row__track {
  flex: 1;
  height: 5px;
  background: #ede9f8;
  border-radius: 3px;
  overflow: hidden;
}
.cmvp-dim-row__fill { height: 100%; background: #05B4EB; border-radius: 3px; }
.cmvp-dim-row__val { min-width: 24px; text-align: right; font-weight: 700; color: #361E54; font-size: 11px; }

.cmvp-rating__divider { height: 1px; background: #e2ddf0; margin: 14px 0; }

/* Star input rows */
.cmvp-star-label {
  font-size: 11px;
  font-weight: 700;
  color: #361E54;
  margin-bottom: 10px;
}
.cmvp-star-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cmvp-star-row__name { min-width: 110px; font-size: 11px; color: #6b6580; }
.cmvp-stars { display: flex; gap: 2px; }
.cmvp-star {
  width: 20px; height: 20px;
  color: #d4cde8;
  cursor: pointer;
  transition: color .1s, transform .1s;
  flex-shrink: 0;
}
.cmvp-star:hover,
.cmvp-star.on { color: #f5a623; }
.cmvp-star:hover { transform: scale(1.15); }
.cmvp-star svg { width: 100%; height: 100%; fill: currentColor; }

/* Thumbs */
.cmvp-rating__q { font-size: 11px; font-weight: 700; color: #361E54; margin-bottom: 8px; }


.cmvp-thumb:hover { border-color: #05B4EB; color: #05B4EB; }
.cmvp-thumb.yes { border-color: #22c55e; background: #dcfce7; color: #166534; }
.cmvp-thumb.no  { border-color: #ef4444; background: #fee2e2; color: #991b1b; }


/* Tags */
.cmvp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.cmvp-tag {
  border: 1.5px solid #e2ddf0;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  color: #6b6580;
  cursor: pointer;
  background: #fff;
  font-family: inherit;
  transition: all .1s;
}
.cmvp-tag:hover,
.cmvp-tag.on { border-color: #361E54; background: #361E54; color: #fff; }

/* Comment */
.cmvp-comment-label { font-size: 11px; font-weight: 600; color: #6b6580; display: block; margin-bottom: 5px; }
.cmvp-comment {
  width: 100%;
  min-height: 70px;
  border: 1.5px solid #e2ddf0;
  border-radius: 7px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  color: #1a1228;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
  margin-bottom: 12px;
  border: 2px solid #c4b5d4;
  border-radius: 6px;
}
.cmvp-comment:focus { border-color: #05B4EB; }

/* Submit */
.cmvp-submit {
  width: 100%;
  padding: 10px;
  background: #361E54;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.cmvp-submit:hover { background: #462D68; }

/* Success */
.cmvp-success {
  display: none;
  text-align: center;
  padding: 28px 20px;
}
.cmvp-success__icon { font-size: 32px; margin-bottom: 8px; }
.cmvp-success__title { font-size: 16px; font-weight: 700; color: #361E54; margin-bottom: 6px; }
.cmvp-success__body { font-size: 12px; color: #6b6580; line-height: 1.5; }

/* Reviews */
.cmvp-reviews { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cmvp-review {
  background: #f7f6fb;
  border: 1px solid #e2ddf0;
  border-radius: 7px;
  padding: 12px 14px;
}
.cmvp-review__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cmvp-review__av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #462D68;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cmvp-review__name { font-size: 11px; font-weight: 700; color: #361E54; }
.cmvp-review__date { font-size: 10px; color: #6b6580; }
.cmvp-review__stars { display: flex; gap: 2px; margin-left: auto; }
.cmvp-review__stars .cmvp-star { width: 11px; height: 11px; color: #f5a623; }
.cmvp-review__text { font-size: 11px; color: #1a1228; line-height: 1.5; }
.cmvp-review__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cmvp-review__tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: #ede9f8;
  color: #462D68;
}

/* ── Rate This Page band ──────────────────────────────────────── */
.bcp-rate-band {
  background: var(--bcp-purple);
  border-top: 3px solid var(--bcp-sky);
}
.bcp-rate-band__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.bcp-rate-band__toggle:hover { background: rgba(255,255,255,.06); }
.bcp-rate-band__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bcp-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bcp-purple);
}
.bcp-rate-band__label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex: 1;
  text-align: left;
}
.bcp-rate-band__sub {
  font-size: 10px;
  color: rgba(255,255,255,.55);
}
/* bcp-rate-band__chevron removed - using inline ▼ */
.bcp-rate-band__panel {
  padding: 0 20px 20px;
}
.bcp-rate-band__panel[hidden] { display: none; }

/* Rating widget header inline sub-text */
.cmvp-rating__sub-inline {
  font-size: 10px;
  color: #6b6580;
  margin-left: 8px;
}
/* Submit row */
.cmvp-submit-row {
  margin-top: 12px;
  text-align: right;
}
.cmvp-submit-btn {
  background: var(--bcp-purple, #361E54);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.cmvp-submit-btn:hover { background: #4a2a72; }

.cmvp-thumbs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 12px;
}
.cmvp-thumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid #c4b5d4;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #361E54;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.cmvp-thumb:hover, .cmvp-thumb.active { background: #f0ecf8; }
.cmvp-thumb svg { width: 16px; height: 16px; }

/* Rate band toggle label arrow */
.bcp-rate-band__label {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  transition: none;
}
.bcp-rate-band__toggle[aria-expanded="true"] .bcp-rate-band__label {
  /* ▼ rotates via JS would need a wrapper - use Unicode directly */
}