/* ==========================================
   mirai-overrides.css (Mirai only)
   Goal: keep Mirai widget compact
   ========================================== */

/* Never let our wrapper become a full-width pill */
.finder_component{
  width: auto !important;
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Don’t reserve space for sticky behaviour */
body{
  padding-bottom: 0 !important;
}

/* Keep the Mirai finder at natural width */
.finder_component [data-mirai-component="finder"]{
  display: inline-block !important;
  width: auto !important;
}

.finder_component ui-finder{
  width: auto !important;
  max-width: none !important;
}

/* Search button */
.finder_component ui-button[data-role="finder-button"]{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-weight: 600;
}

/* Mobile: allow it to expand */
@media (max-width: 768px){
  .finder_component [data-mirai-component="finder"]{
    display: block !important;
    width: 100% !important;
  }

  .finder_component ui-finder{
    width: 100% !important;
  }

  .finder_component ui-button[data-role="finder-button"]{
    width: 100% !important;
    max-width: none !important;
  }
}

/* ==========================================
   Optional polish (SAFE)
   - cosmetics only, no layout changes
   ========================================== */

/* Slightly reduce overall finder “height” feel */
.finder-section .finder_component ui-finder{
  font-size: 0.95rem;
}

/* Make the Search button match your hero pill vibe */
.finder_component ui-button[data-role="finder-button"]{
  border-radius: 999px !important;
  padding: 12px 26px !important;   /* slightly shorter */
  letter-spacing: .2px;
}

.finder-section .finder_component{
  border-radius: 14px;
}
/* ==========================================
   Optional polish: match hero CTA exactly
   SAFE: cosmetics only
   ========================================== */

/* Match hero .btn.btn-primary */
.finder_component ui-button[data-role="finder-button"]{
  background: var(--brand-primary, #19a6a3) !important; /* fallback if variable missing */
  color: #fff !important;

  border-radius: 999px !important;
  padding: 14px 32px !important;

  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .3px;
}

/* Hover feel similar to hero CTA */
.finder_component ui-button[data-role="finder-button"]:hover{
  filter: brightness(1.05);
}
.finder-section ui-finder{
  font-size: 0.95rem;
}