/* =========================================================
   ERGESHOP – Techno: vyhledávání v hlavičce (opravená verze)
   CSS soubor (externí) – VYČIŠTĚNO + sjednocení modré s logem
   + opravený hover na košíku
   ========================================================= */

/* ---------------------------------------------------------
   Proměnné barev – modrá jako logo (gradient)
   --------------------------------------------------------- */
:root{
  --rg-blue-main: #00AEEF;   /* hlavní modrá */
  --rg-blue-dark: #007EA8;   /* tmavší modrá jako v logu */
}

/* Defaultně náš modul schováme (zobrazuje se jen na desktopu dle media) */
#header .ergeshop-header-search {
  display: none !important;
}

/* ---------------------------------------------------------
   MOBIL / TABLET (do 991px)
   - search pole skryté
   - lupa šablony viditelná a funkční
   --------------------------------------------------------- */
@media (max-width: 991px) {

  #header .navigation-buttons a[data-target="search"] {
    display: inline-flex !important;
  }

  #header .navigation-buttons {
    margin-right: 0 !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #header .navigation-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ---------------------------------------------------------
   DESKTOP 992–1199px
   --------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {

  #header .container.navigation-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-right: 70px !important;
    box-sizing: border-box !important;
  }

  #header .site-name,
  #header .site-name-wrapper {
    flex: 0 0 auto !important;
  }

  #header #navigation {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  #header .ergeshop-header-search {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: 420px !important;
    min-width: 160px !important;
  }

  #header .ergeshop-header-search form {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #header .ergeshop-header-search input[type="search"],
  #header .ergeshop-header-search input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 2px solid #d9d9d9 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    background: #fff !important;
  }

  #header .ergeshop-header-search input[type="search"]:focus,
  #header .ergeshop-header-search input[type="text"]:focus {
    outline: none !important;
    border-color: var(--rg-blue-main) !important;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18) !important;
  }

  /* TLAČÍTKO „SUCHEN“ – sjednocení s logem (gradient) */
  #header .ergeshop-header-search button {
    flex: 0 0 auto !important;
    height: 40px !important;
    border-radius: 4px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;

    background: linear-gradient(135deg, var(--rg-blue-main), var(--rg-blue-dark)) !important;
    border: 2px solid var(--rg-blue-main) !important;

    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: filter .15s ease !important;
  }

  #header .ergeshop-header-search button:hover {
    filter: brightness(0.92) !important;
  }

  #header .navigation-buttons {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #header .navigation-buttons a[data-target="search"] {
    display: none !important;
  }

  #header .navigation-buttons a[data-target="navigation"] {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   DESKTOP 1200px+
   --------------------------------------------------------- */
@media (min-width: 1200px) {

  #header .container.navigation-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding-right: 70px !important;
    box-sizing: border-box !important;
  }

  #header .site-name,
  #header .site-name-wrapper {
    flex: 0 0 auto !important;
  }

  #header #navigation {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  #header .ergeshop-header-search {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: 560px !important;
    min-width: 200px !important;
  }

  #header .ergeshop-header-search form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #header .ergeshop-header-search input[type="search"],
  #header .ergeshop-header-search input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 4px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 2px solid #d9d9d9 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    background: #fff !important;
  }

  #header .ergeshop-header-search input[type="search"]:focus,
  #header .ergeshop-header-search input[type="text"]:focus {
    outline: none !important;
    border-color: var(--rg-blue-main) !important;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18) !important;
  }

  /* TLAČÍTKO „SUCHEN“ – sjednocení s logem (gradient) */
  #header .ergeshop-header-search button {
    flex: 0 0 auto !important;
    height: 44px !important;
    border-radius: 4px !important;
    padding: 0 18px !important;
    white-space: nowrap !important;

    background: linear-gradient(135deg, var(--rg-blue-main), var(--rg-blue-dark)) !important;
    border: 2px solid var(--rg-blue-main) !important;

    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: filter .15s ease !important;
  }

  #header .ergeshop-header-search button:hover {
    filter: brightness(0.92) !important;
  }

  #header .navigation-buttons {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #header .navigation-buttons a[data-target="search"] {
    display: none !important;
  }

  #header .navigation-buttons a[data-target="navigation"] {
    display: none !important;
  }
}

/* =========================================================
   ERGESHOP – TOP BAR
   ========================================================= */

.top-navigation-bar {
  background: #E6F0F8 !important;
  border-bottom: 1px solid rgba(26,58,92,0.10) !important;
}

.top-navigation-bar .container{
  position: relative !important;
  min-height: 48px !important;
}

.top-navigation-bar-right{
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  white-space: nowrap !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
}

.top-navigation-bar-right strong,
.top-navigation-bar-right a.project-phone,
.top-navigation-bar-right a.project-phone span,
.top-navigation-bar-right a.project-email,
.top-navigation-bar-right a.project-email span{
  align-self: center !important;
  color: #1A3A5C !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.top-navigation-bar-right a.project-email,
.top-navigation-bar-right a.project-email span{
  font-weight: 500 !important;
  opacity: 0.85 !important;
}

.top-navigation-bar-right .top-nav-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  font-size: 14px !important; /* zvětšeno */
  background: #ffffff !important;
  background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, rgba(0,174,239,0.10) 100%) !important;
  color: #1A3A5C !important;
  transition: background-image .2s ease, box-shadow .2s ease !important;
}

.top-navigation-bar-right .top-nav-button-login{
  box-shadow: inset -2px 0 0 rgba(0,174,239,0.5) !important;
}

.top-navigation-bar-right .top-nav-button-register{
  background-image: linear-gradient(135deg, #ffffff 0%, rgba(0,174,239,0.08) 50%, rgba(0,174,239,0.18) 100%) !important;
  box-shadow: inset -3px 0 0 rgba(0,174,239,0.15) !important;
}

.top-navigation-bar-right .top-nav-button-login span,
.top-navigation-bar-right .top-nav-button-register span{
  color: #1A3A5C !important;
}

.top-navigation-bar-right .top-nav-button-login:hover{
  background-image: linear-gradient(135deg, rgba(0,174,239,0.05) 0%, #ffffff 50%, rgba(0,174,239,0.18) 100%) !important;
  box-shadow: inset -2px 0 0 rgba(0,174,239,0.7) !important;
}

.top-navigation-bar-right .top-nav-button-register:hover{
  background-image: linear-gradient(135deg, #ffffff 0%, rgba(0,174,239,0.14) 50%, rgba(0,174,239,0.28) 100%) !important;
}

/* Schovat text Kundenunterstützung */
.top-navigation-bar-right strong {
  display: none !important;
}

/* Ikonka před telefonním číslem */
.top-navigation-bar-right a.project-phone::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 5px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A3A5C'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

/* Na mobilu schovat email v top baru */
@media (max-width: 992px){
  .top-navigation-bar-right a.project-email{
    display: none !important;
  }
}

/* =========================================================
   KOŠÍK – sjednocení s logem (gradient) + funkční hover
   ========================================================= */

/* Základ košíku */
#header .navigation-buttons a[data-target="cart"] {
  background: linear-gradient(135deg, var(--rg-blue-main), var(--rg-blue-dark)) !important;
  border: none !important;
  transition: filter .15s ease, transform .05s ease !important; /* aby hover byl vidět */
}

/* Hover + focus (klávesnice) – funguje i na gradient */
#header .navigation-buttons a[data-target="cart"]:hover,
#header .navigation-buttons a[data-target="cart"]:focus {
  filter: brightness(0.92) saturate(1.05) !important;
}

/* Klik efekt */
#header .navigation-buttons a[data-target="cart"]:active {
  transform: translateY(1px) !important;
  filter: brightness(0.88) saturate(1.05) !important;
}

/* ======================================================
   IKONY DO LEVÉHO MENU KATEGORIÍ – RGSHOP (DE)
   Velikost ikon: 28px
   Cesta: /user/documents/upload/kategorie/
   ====================================================== */

/* Základní nastavení všech kategorií */
#categories .categories .topic > a{
  display: block;                              /* aby background fungoval správně */
  padding-left: 56px !important;               /* místo pro 28px ikonu */
  background-repeat: no-repeat !important;     /* ikona se neopakuje */
  background-size: 28px !important;            /* velikost ikony */
  background-position: 12px 50% !important;    /* 12px zleva, vertikálně na střed */
}

/* ------------------------------------------------------
   KONKRÉTNÍ KATEGORIE (podle ID)
   ------------------------------------------------------ */

/* Ladegeräte */
#categories .categories#cat-705 .topic > a{
  background-image: url(/user/documents/upload/kategorie/ladegeraete.png) !important;
}

/* Akkus */
#categories .categories#cat-708 .topic > a{
  background-image: url(/user/documents/upload/kategorie/akkus.png) !important;
}

/* Tastaturen */
#categories .categories#cat-711 .topic > a{
  background-image: url(/user/documents/upload/kategorie/tastaturen.png) !important;
}

/* Gehäuseteile */
#categories .categories#cat-714 .topic > a{
  background-image: url(/user/documents/upload/kategorie/gehaeuseteile.png) !important;
}

/* Lüfter */
#categories .categories#cat-717 .topic > a{
  background-image: url(/user/documents/upload/kategorie/luefter.png) !important;
}

/* Displaykabel */
#categories .categories#cat-723 .topic > a{
  background-image: url(/user/documents/upload/kategorie/displaykabel.png) !important;
}

/* Displayscharniere */
#categories .categories#cat-726 .topic > a{
  background-image: url(/user/documents/upload/kategorie/displayscharniere.png) !important;
}

/* Kabel und Anschlüsse */
#categories .categories#cat-729 .topic > a{
  background-image: url(/user/documents/upload/kategorie/kabel-anschluesse.png) !important;
}

/* =========================================================
   ERGESHOP – FOOTER (profi DE styl, čitelnost, barvy)
   Cíl: nadpisy navy, text šedý, hover modrý, pozadí světle modré
   ========================================================= */

footer#footer.footer{
  background: #E6F0F8 !important;           /* stejné jako top bar */
  border-top: 1px solid rgba(26,58,92,0.10) !important;
}

/* Vnitřní kontejnery a sloupce – jemné odsazení */
footer#footer .footer-rows{
  padding-top: 28px !important;
  padding-bottom: 18px !important;
}

footer#footer .custom-footer .banner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

footer#footer .custom-footer .banner-wrapper{
  padding: 0 !important;
}

/* Všechen text ve footeru jako výchozí tmavší šedá */
footer#footer,
footer#footer .custom-footer,
footer#footer .custom-footer div,
footer#footer .custom-footer span,
footer#footer .custom-footer p,
footer#footer .custom-footer li{
  color: #4A5560 !important;               /* čitelné, ne moc tvrdé */
}

/* Odkazy – stejná šedá, na hover modrá */
footer#footer a{
  color: #4A5560 !important;
  text-decoration: none !important;
}

footer#footer a:hover{
    color: #2F3A44 !important;   /* viditelně tmavší než #4A5560 */
    text-decoration: none !important;
}

/* Nadpisy ve sloupcích:
   Nemáš třídy pro nadpisy, takže chytáme první div uvnitř promo obsahu */
footer#footer .custom-footer .banner-wrapper span[data-ec-promo-id] > div > div:first-child{
  color: #1A3A5C !important;               /* navy jako top bar text */
  letter-spacing: 0.04em !important;
}

/* KONTAKT sloupec má nadpis "KONTAKT" a jiné vnoření – chytíme to taky */
footer#footer .custom-footer__banner4731 .banner-wrapper span[data-ec-promo-id] > div > div:first-child{
  color: #1A3A5C !important;
  text-transform: uppercase !important;
}

/* Odřádkování položek ve sloupcích – sjednocení */
footer#footer .custom-footer .banner-wrapper div[style*="line-height"]{
  line-height: 1.9 !important; /* necháme jak chceš, ale ať je konzistentní */
}

/* Telefon v kontaktu – zvýraznit */
footer#footer .custom-footer__banner4731 strong{
  color: #1A3A5C !important;
  font-weight: 700 !important;
}

/* White logo v kontaktu – uděláme mu světlý „badge“, aby bylo vidět */
footer#footer .custom-footer__banner4731 img[alt="ergeshop.de"],
footer#footer .custom-footer__banner4731 img[src*="logo-white"]{
  background: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(26,58,92,0.10) !important;
}

/* Sloupec „Warum bei uns kaufen?“ – fajfky a text čitelné */
footer#footer .custom-footer__banner8711 div{
  color: #4A5560 !important;
}

/* Spodní část footeru (copyright + Shoptet) */
footer#footer .footer-bottom{
  border-top: 1px solid rgba(26,58,92,0.10) !important;
  padding-top: 14px !important;
  padding-bottom: 16px !important;
}

/* Copyright řádek */
footer#footer .footer-bottom .copyright{
  color: #6B7280 !important;
  font-size: 13px !important;
}

footer#footer .footer-bottom .copyright strong{
  color: #1A3A5C !important;
}

/* „Erstellt von Shoptet“ a logo – ať není vyblité */
footer#footer #signature,
footer#footer #signature a{
  color: #6B7280 !important;
  font-size: 13px !important;
}

footer#footer #signature a:hover{
  color: #00AEEF !important;
}

/* Responsivní: ať se sloupce na mobilu nelepí na sebe */
@media (max-width: 767px){
  footer#footer .custom-footer > [class*="col-"]{
    margin-bottom: 18px !important;
  }
}

/* ERGESHOP – hover odkazu ve footeru */
#footer a:hover{
    color:#00AEEF !important;
    text-decoration:underline;
    text-underline-offset:2px;
}