/* PJmatch adjustments layered on top of the purchased Ollya template CSS.
   Only loaded on the landing page. */

.ollya-page {
  font-family: "Public Sans", sans-serif;
}

.ollya-page .default-btn {
  cursor: pointer;
}

.ollya-region-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid rgba(242, 69, 112, 0.35);
  background: #fff;
  color: #1d2746;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.ollya-region-pill:hover {
  border-color: #f24570;
  color: #f24570;
}

.ollya-region-pill.active {
  background: #f24570;
  border-color: #f24570;
  color: #fff;
}

.ollya-select {
  width: 100%;
  height: 45px;
  border-radius: 4px;
  border: 1px solid rgba(29, 39, 70, 0.12);
  background: #fff;
  color: #1d2746;
  padding: 0 12px;
  font-size: 15px;
}

.ollya-page .about__bottom--body img {
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(29, 39, 70, 0.15);
}

/* ---------------------------------------------------------------
   Hard overrides: Tailwind preflight + template inherited colors
   were fighting the purchased template styles.
   --------------------------------------------------------------- */

/* Buttons — brand pink, matching the template's style-2 CTA */
.ollya-page .default-btn,
.ollya-page a.default-btn,
.ollya-page button.default-btn {
  background: #f24570 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px -1px rgba(242, 69, 112, 0.25);
}
.ollya-page .default-btn span {
  color: #fff !important;
}
.ollya-page .default-btn:hover {
  background: #d92f5b !important;
  border-radius: 25px;
  letter-spacing: 0.85px;
  box-shadow: 0 8px 20px -6px rgba(242, 69, 112, 0.55);
}
.ollya-page .default-btn:hover span {
  color: #fff !important;
}

/* Soft / secondary variant */
.ollya-page .default-btn.reverse {
  background: #ffe4eb !important;
}
.ollya-page .default-btn.reverse span {
  color: #f24570 !important;
}
.ollya-page .default-btn.reverse:hover {
  background: #f24570 !important;
}
.ollya-page .default-btn.reverse:hover span {
  color: #fff !important;
}

/* Form fields — were rendering white text on a white/pink surface */
.ollya-page select.ollya-select,
.ollya-page .banner__inputlist select,
.ollya-page .about__right select,
.ollya-page .about__right input {
  width: 100% !important;
  height: 48px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(29, 39, 70, 0.14) !important;
  background-color: #fff !important;
  color: #1d2746 !important;
  padding: 0 36px 0 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23f24570' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  box-shadow: 0 2px 6px rgba(29, 39, 70, 0.06);
}
.ollya-page select.ollya-select:focus,
.ollya-page .banner__inputlist select:focus {
  outline: none;
  border-color: #f24570 !important;
}
.ollya-page select option,
.ollya-page select optgroup {
  color: #1d2746 !important;
  background: #fff !important;
  -webkit-text-fill-color: #1d2746 !important;
}
.ollya-page select option:checked,
.ollya-page select option:focus {
  color: #fff !important;
  background: #f24570 !important;
}

/* Labels above the fields stay readable on the light card */
.ollya-page .about__right label,
.ollya-page .banner__list label {
  color: #fff;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

/* ---------------------------------------------------------------
   Mobile fixes: Bootstrap's negative row gutters pushed the footer
   past the viewport, and the fixed bottom nav covered the last rows.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer .row,
  footer .row {
    margin-left: 0;
    margin-right: 0;
  }
  .footer,
  footer {
    overflow-x: hidden;
  }
  .footer__bottom {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== Mobile compaction: reduce wasted vertical space on phones ===== */
@media (max-width: 767.98px) {
  /* Mobile Browse uses the compact in-page filter control, not the large
     desktop search card. */
  .browse-top-filters {
    display: none !important;
  }

  /* Pink page headers (browse, members) — 80px is far too tall on mobile */
  .pageheader {
    padding-block: 32px !important;
  }
  .pageheader__content h2 {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .pageheader .breadcrumb {
    font-size: 12px !important;
  }

  /* Template section top padding: 75px -> 20px */
  .padding-top {
    padding-top: 20px !important;
  }

  /* Floating search/filter card */
  .about--style3 .section__wrapper {
    padding: 14px 12px !important;
    margin-top: 0 !important;
  }
  .about--style3 .banner__list label {
    margin-bottom: 4px !important;
    font-size: 13px !important;
  }
  .about--style3 .banner__inputlist {
    margin-bottom: 10px !important;
  }
  .about--style3 .banner__inputlist select,
  .about--style3 .banner__inputlist input {
    padding-block: 10px !important;
  }
  .about--style3 form .default-btn {
    padding-block: 12px !important;
  }

  /* Member count / order row */
  .member__info {
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
  }
  .member__info--left p,
  .member__info--left h6 {
    font-size: 14px !important;
  }

  /* Grid gaps between member cards */
  .member__grid > * {
    margin-bottom: 12px !important;
  }

  /* Generic section wrappers */
  .section__header {
    margin-bottom: 16px !important;
  }

  /* App download / promo bands keep desktop size only */
  .app--style2,
  .footer__newsletter {
    padding-block: 28px !important;
  }

  /* Compact mobile browse filter bar: only the Filters pill + count show;
     the All Members pill and Order By live inside the filter panel. */
  .browse-filter-bar {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
  .browse-filter-bar .member__info--left {
    gap: 8px;
    flex-wrap: wrap;
  }
  .browse-filter-bar .member__info--filter .default-btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
  .browse-filter-bar .order-by-desktop,
  .browse-filter-bar .member__info--count {
    display: none !important;
  }
  .browse-filter-bar .browse-result-count {
    display: inline !important;
  }
}

/* Result count is only shown in the compact mobile filter bar */
.browse-result-count {
  display: none;
}