/* ============================================================
   GLOBAL: header, nav, switchers, search, carousels, promo rows, utilities
   Loaded from inc/misc.php
   ============================================================ */
/* ---------- Top bar ---------- */

#top-bar > div > div.flex-col.hide-for-medium.flex-center > ul > li {
  text-align: center;
}

#top-bar > div > div.flex-col.hide-for-medium.flex-left > ul > li.html.custom.html_top_right_text > div > div > div > div:nth-child(1) > div > div {
  color: #ffffff !important;
  font-weight: 200;
}

/* ---------- Search (Flatsome + Doofinder) ---------- */

/* Brand-pink borders on flat forms (search boxes etc.) */
.form-flat input:not([type=submit]),
.form-flat select {
  border-color: #e24585;
  border-width: medium;
  color: #e24585 !important;
}

/* Search icon on the search results page */
#content > div.searchform-wrapper.ux-search-box.relative.form-flat.is-normal > form > div.flex-row.relative > div:nth-child(2) > button > i {
  color: #e24585;
}

/* Desktop: stop Flatsome's search dropdown opening from the header icon */
#masthead .header-search-dropdown .nav-dropdown {
  display: none !important;
}

/* Stop Flatsome's live search suggestions appearing under search fields */
.live-search-results,
.autocomplete-suggestions {
  display: none !important;
}

/* Doofinder: remove the full-width underline */
.dfd-root .dfd-layer .dfd-header,
.dfd-root .dfd-layer .dfd-searchbox {
  border: none !important;
  box-shadow: none !important;
}

/* Doofinder: pill-shaped search bar */
.dfd-root .dfd-layer .dfd-searchbox {
  background: #f7f1f3 !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  margin: 10px 12px !important;
  min-height: 44px;
}

.dfd-root .dfd-layer .dfd-searchbox-input {
  background: transparent !important;
  border: none !important;
  font-family: inherit;
  font-size: 16px !important;
}

/* Doofinder: brand outline when active */
.dfd-root .dfd-layer .dfd-searchbox:focus-within {
  box-shadow: 0 0 0 1px #e04f86 !important;
}

/* Doofinder mobile: slightly tighter spacing */
.dfd-root.dfd-mobile .dfd-layer .dfd-searchbox {
  margin: 8px 10px !important;
  padding: 0 10px !important;
}

/* Doofinder: hide the logo on mobile so the bar gets the full width */
@media (max-width: 768px) {
  .dfd-root .dfd-logo {
    display: none;
  }
}

/* ---------- Carousels (Flickity) ---------- */

.flickity-viewport .flickity-slider > * {
  opacity: 1 !important;
}

@media (min-width: 850px) {
  .flickity-prev-next-button.previous,
  .flickity-prev-next-button.next {
    margin-top: -85px;
  }
}

@media (max-width: 849px) {
  .flickity-prev-next-button.previous,
  .flickity-prev-next-button.next {
    margin-top: -90px;
  }
}

@media (max-width: 549px) {
  .image-carousel .flickity-slider > * {
    width: 70% !important;
    max-width: 70% !important;
  }

  .image-carousel .flickity-prev-next-button {
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
  }

  .image-carousel .flickity-prev-next-button.previous {
    left: 5px !important;
  }

  .image-carousel .flickity-prev-next-button.next {
    right: 5px !important;
  }
}

/* ---------- Slider arrows: filled circles ---------- */
.image-carousel .flickity-prev-next-button svg,
.filled-arrows .flickity-prev-next-button svg {
  background-color: rgba(255, 255, 255, .9) !important;
  border-color: transparent !important;
  fill: #444 !important;
  color: #444 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transition: background-color .2s ease, fill .2s ease;
}

/* Hover: brand pink */
.image-carousel .flickity-prev-next-button:hover svg,
.filled-arrows .flickity-prev-next-button:hover svg {
  background-color: #e24585 !important;
  fill: #fff !important;
  color: #fff !important;
}

/* ---------- Promo row (image/video + text) ---------- */

@media (min-width: 850px) {
  .promo-row {
    justify-content: center;
    align-items: center;
  }

  .promo-row > .col {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
  }

  .promo-row .promo-text {
    max-width: 540px !important;
    padding-left: 50px;
  }

  .video-button {
    display: table;
    margin-left: 0 !important;
    margin-top: 0;
  }
}

@media (max-width: 849px) {
  .promo-row .promo-text .video-button.button {
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .promo-row .promo-text br {
    display: none;
  }
}

.promo-row video {
  display: block;
  max-height: 600px;
  width: auto;
  max-width: 100%;
}

.promo-text p {
  font-family: lato-regular, sans-serif;
  font-weight: 700;
  font-size: 1.25em;
  color: #555;
  line-height: 1.75;
  margin-bottom: 0.6em;
}

@media (max-width: 549px) {
  .promo-text p {
    font-size: 1.05em;
  }
}

/* ---------- Utilities ---------- */

.slider-button {
  margin-top: 30px;
}

/* From live (not on staging): green link colour class */
.green-links a,
.green-links a:visited,
.green-links a:focus,
.green-links a:active {
  color: rgb(21, 64, 44) !important;
  text-decoration: none;
}

.green-links a:hover {
  color: #6a7567 !important;
  text-decoration: none;
}