/*
 * RP Design — site CSS on top of So Emarket 3.0.1.
 * Loaded after all theme CSS (RP Design event on common/header).
 * --rp-accent comes from the theme colour (or the override in RP Design settings).
 * Selectors are taken from the theme sources (header35.scss, so_searchpro/default.twig).
 */

/* ===== Top menu (RP Top Menu, So Megamenu horizontal): two lines, same font, centred =====
   Line 1 = item Name, line 2 = item Description (<br><span class="description">). */
.typeheader-35 .container-megamenu.horizontal ul.megamenu > li > a strong {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.typeheader-35 .container-megamenu.horizontal ul.megamenu > li > a strong .description {
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* Hover / current section line: inside the yellow header (theme draws it 24px lower, on the
   banner, where it is invisible). Current section = li.rp-section-active (set by RP Sections). */
.typeheader-35 .container-megamenu.horizontal ul.megamenu > li > a::before {
  bottom: 0 !important;
  background-color: #222 !important;
}
.typeheader-35 .container-megamenu.horizontal ul.megamenu > li.rp-section-active > a::before {
  width: 100% !important;
  height: 4px !important;
}

/* ===== Header search (So Search Pro in Search Block of header 35) =====
   Theme: slanted box via clip-path (cuts off the suggestion list), category select hidden.
   Here: straight box = [category select][input][button], suggestions on top of the page. */
@media (min-width: 768px) {
  .typeheader-35 .header-bottom .search-header-w {
    clip-path: none !important;
    width: 640px;
    max-width: 55%;
    padding: 4px;
    background-color: var(--rp-accent, #fbb91f);
    border-radius: 4px;
  }
  .typeheader-35 .search-header-w #sosearchpro .search {
    clip-path: none !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    background: #fff;
    border-radius: 3px;
  }
  .typeheader-35 .search-header-w #sosearchpro .search .select_category {
    display: block !important;
    position: relative;
    flex: 0 0 190px;
    width: 190px;
    height: 40px;
    border-right: 1px solid #ddd;
    border-radius: 3px 0 0 3px !important;
  }
  .typeheader-35 .search-header-w #sosearchpro .search .autosearch-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
  }
  .typeheader-35 .search-header-w #sosearchpro .search .input-group-btn {
    flex: 0 0 auto;
    width: auto;
    display: flex;
  }
  .typeheader-35 .search-header-w #sosearchpro .search button.button-search {
    position: static !important;
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    border-radius: 0 3px 3px 0;
    background: var(--rp-accent, #fbb91f);
  }
  .typeheader-35 .search-header-w #sosearchpro .search button.button-search i {
    padding: 0;
    color: #222;
  }
  /* the slanted stripe drawn next to the button */
  .typeheader-35 .search-header-w #sosearchpro .search button.button-search::before {
    display: none !important;
  }
}

/* Narrower screens (tablet): smaller category select so the field stays usable */
@media (min-width: 768px) and (max-width: 1199px) {
  .typeheader-35 .search-header-w #sosearchpro .search .select_category {
    flex-basis: 150px;
    width: 150px;
  }
}

/* Category select (chosen plugin) */
.typeheader-35 #sosearchpro .chosen-container {
  height: 100%;
}
.typeheader-35 #sosearchpro .chosen-container-single .chosen-single {
  height: 40px;
  line-height: 40px;
  padding: 0 28px 0 15px;
  border: 0;
  border-radius: 3px 0 0 3px;
  background: #fff;
  box-shadow: none;
  color: #484848;
  font-size: 13px;
}
.typeheader-35 #sosearchpro .chosen-container .chosen-drop {
  z-index: 1010;
  min-width: 260px;
}

/* Suggestions list: on top of the page content */
.typeheader-35 #sosearchpro .search .dropdown-menu {
  z-index: 1000;
  margin-top: 4px;
}

/* ===== Side lists of core modules (Topic in the blog, Category): theme colour instead of Bootstrap blue =====
   Markup: extension/opencart/.../module/topic.twig — .list-group > a.list-group-item(.active) */
.content-aside .list-group-item.active,
.content-aside .list-group-item.active:hover,
.content-aside .list-group-item.active:focus {
  background-color: var(--rp-accent, #fbb91f);
  border-color: var(--rp-accent, #fbb91f);
  color: #222;
}
.content-aside a.list-group-item:hover {
  color: var(--rp-accent, #fbb91f);
}
.content-aside .list-group-item.active:hover {
  color: #222;
}