/* Start custom CSS for html, class: .elementor-element-25369b1 *//* =========================================================
   BEAR HUGS – POSTRANNÍ BANNER
   Kompletní CSS pro Elementor / WordPress
   ========================================================= */


/* =========================================================
   HLAVNÍ NASTAVENÍ
   V této části upravuješ nejdůležitější hodnoty banneru.
   ========================================================= */

:root {

  /* =======================================================
     POZADÍ BANNERU
     ======================================================= */

  /* 
    Barva pozadí banneru ve formátu RGB.
    102, 102, 102 = #666666
  */
  --bh-banner-bg-color: 102, 102, 102;

  /*
    Průhlednost pozadí banneru.
    0.20 = 20 %
    0.50 = 50 %
    1 = plná barva bez průhlednosti
  */
  --bh-banner-bg-opacity: 0.20;

  /*
    Zaoblení pravých rohů banneru.
    Levé rohy zůstávají rovné, protože banner sedí u levého okraje obrazovky.
  */
  --bh-banner-radius: 15px;

  /*
    Stín banneru.
    Poslední hodnota 0.50 znamená přibližně 50% intenzitu stínu.
  */
  --bh-banner-shadow: 0 8px 24px rgba(0, 0, 0, 0.50);

  /*
    Jemné rozmazání obsahu za bannerem.
    Pro vypnutí nastav 0px.
  */
  --bh-banner-backdrop-blur: 3px;

  /*
    Vrstva banneru.
    Čím vyšší číslo, tím více bude banner nad ostatními prvky stránky.
  */
  --bh-banner-z-index: 9999;


  /* =======================================================
     TEXT – FONT, BARVY, OBRYS, STÍN
     ======================================================= */

  /* Použitý font */
  --bh-text-font: "Roboto", Arial, sans-serif;

  /*
    Základní barva textu.
    Pokud běží animace, používají se níže barvy 1 a 2.
  */
  --bh-text-color: #ffffff;

  /*
    První barva animace textu.
    Tady je bílá.
  */
  --bh-text-color-1: #ffffff;

  /*
    Druhá barva animace textu.
    Tady je tyrkysová.
  */
  --bh-text-color-2: #00e5ff;

  /*
    Délka jednoho cyklu animace barvy textu.
    6s = text přejde z bílé do tyrkysové a zpět za 6 sekund.
  */
  --bh-text-color-animation-speed: 6s;

  /*
    Síla písma.
    400 = normální
    700 = tučné
    900 = velmi tučné
  */
  --bh-text-weight: 900;

  /* Jemné mezery mezi písmeny */
  --bh-text-letter-spacing: 0.2px;

  /*
    Obrys písma.
    0px = obrys vypnutý
    1px = jemný obrys
    2px = výraznější obrys
  */
  --bh-text-stroke-width: 0px;

  /* Barva obrysu písma */
  --bh-text-stroke-color: rgba(0, 0, 0, 0.65);

  /*
    Stín textu.
    Pomáhá čitelnosti na průhledném pozadí.
  */
  --bh-text-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);


  /* =======================================================
     PC – ROZMĚRY, POZICE A ZAROVNÁNÍ
     ======================================================= */

  /* Rozměr banneru na PC */
  --bh-banner-width-desktop: 250px;
  --bh-banner-height-desktop: 250px;

  /*
    Výšková pozice banneru.
    50vh = zhruba střed obrazovky
    63vh = níže, vhodné do spodnější třetiny
    70vh = ještě níže
  */
  --bh-banner-top-desktop: 63vh;

  /*
    Vnitřní odsazení banneru.
    Pořadí hodnot: nahoře, vpravo, dole, vlevo.
  */
  --bh-banner-padding-desktop: 10px 14px 10px 0px;

  /*
    Šířka levého prostoru pro medvídka.
    Pokud medvídek zabírá moc místa nebo tlačí text, uprav tuto hodnotu.
  */
  --bh-image-box-width-desktop: 118px;

  /*
    Velikost medvídka na PC.
  */
  --bh-bear-width-desktop: 132px;

  /*
    Odsazení medvídka od levého okraje banneru.
    Toto je hlavní hodnota, kterou použij, když je medvídek moc nalepený vlevo.

    0px  = bez odsazení
    10px = mírně doprava
    20px = více doprava
  */
  --bh-bear-left-offset-desktop: 18px;

  /*
    Jemný posun medvídka.
    X = vodorovně, Y = svisle.
    Používej až pro doladění po nastavení odsazení.
  */
  --bh-bear-move-x-desktop: 0px;
  --bh-bear-move-y-desktop: 4px;

  /*
    Mezera mezi medvídkem a textem.
  */
  --bh-content-gap-desktop: 2px;

  /* Velikost textu na PC */
  --bh-text-size-desktop: 23px;

  /*
    Výška řádků textu.
    Nižší hodnota = slova jsou blíže u sebe.
  */
  --bh-text-line-height-desktop: 1.03;


  /* =======================================================
     TABLET – ROZMĚRY, POZICE A ZAROVNÁNÍ
     ======================================================= */

  --bh-banner-width-tablet: 220px;
  --bh-banner-height-tablet: 220px;
  --bh-banner-top-tablet: 62vh;

  --bh-banner-padding-tablet: 9px 12px 9px 0px;

  --bh-image-box-width-tablet: 104px;
  --bh-bear-width-tablet: 116px;

  /*
    Odsazení medvídka od levého okraje na tabletu.
  */
  --bh-bear-left-offset-tablet: 15px;

  --bh-bear-move-x-tablet: 0px;
  --bh-bear-move-y-tablet: 3px;

  --bh-content-gap-tablet: 2px;

  --bh-text-size-tablet: 20px;
  --bh-text-line-height-tablet: 1.04;


  /* =======================================================
     MOBIL – ROZMĚRY, POZICE A ZAROVNÁNÍ
     ======================================================= */

  --bh-banner-width-mobile: 180px;
  --bh-banner-height-mobile: 180px;
  --bh-banner-top-mobile: 64vh;

  --bh-banner-padding-mobile: 8px 10px 8px 0px;

  --bh-image-box-width-mobile: 82px;
  --bh-bear-width-mobile: 92px;

  /*
    Odsazení medvídka od levého okraje na mobilu.
  */
  --bh-bear-left-offset-mobile: 11px;

  --bh-bear-move-x-mobile: 0px;
  --bh-bear-move-y-mobile: 2px;

  --bh-content-gap-mobile: 1px;

  --bh-text-size-mobile: 16px;
  --bh-text-line-height-mobile: 1.05;


  /* =======================================================
     ANIMACE VYSUNUTÍ BANNERU
     ======================================================= */

  /*
    Rychlost vysunutí banneru z levé strany.
  */
  --bh-animation-speed: 0.55s;
}


/* =========================================================
   HLAVNÍ BOX BANNERU
   ========================================================= */

.bh-price-banner {
  position: fixed;

  /* Banner je přilepený k levému okraji obrazovky */
  left: 0;

  /* Výšková pozice banneru na PC */
  top: var(--bh-banner-top-desktop);

  /* Rozměr banneru na PC */
  width: var(--bh-banner-width-desktop);
  height: var(--bh-banner-height-desktop);

  /* Umístění banneru nad ostatní prvky stránky */
  z-index: var(--bh-banner-z-index);

  /* Pozadí banneru s nastavitelnou průhledností */
  background: rgba(
    var(--bh-banner-bg-color),
    var(--bh-banner-bg-opacity)
  );

  /* Levé rohy rovné, pravé rohy zaoblené */
  border-radius: 0 var(--bh-banner-radius) var(--bh-banner-radius) 0;

  /* Stín banneru */
  box-shadow: var(--bh-banner-shadow);

  /* Skryje obsah, který by přesahoval mimo banner */
  overflow: hidden;

  /*
    Výchozí stav:
    Banner je schovaný vlevo mimo obrazovku.
  */
  opacity: 0;
  transform: translateX(-110%) translateY(-50%);

  /* Plynulá animace vysunutí */
  transition:
    transform var(--bh-animation-speed) ease,
    opacity var(--bh-animation-speed) ease;

  /*
    Když je banner schovaný, neblokuje klikání na stránku.
  */
  pointer-events: none;

  /* Jemné rozmazání pozadí za bannerem */
  backdrop-filter: blur(var(--bh-banner-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--bh-banner-backdrop-blur));
}


/* =========================================================
   VIDITELNÝ STAV BANNERU
   Třídu přidává JavaScript po začátku scrollování.
   ========================================================= */

.bh-price-banner.bh-price-banner--visible {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
  pointer-events: auto;
}


/* =========================================================
   VNITŘNÍ ROZLOŽENÍ BANNERU
   Zajišťuje, aby obrázek a text byly v jedné vodorovné
   i svislé rovině.
   ========================================================= */

.bh-price-banner__inner {
  width: 100%;
  height: 100%;

  box-sizing: border-box;

  /* Vnitřní odsazení banneru na PC */
  padding: var(--bh-banner-padding-desktop);

  /*
    Flexbox drží medvídka a text vedle sebe.
  */
  display: flex;
  flex-direction: row;

  /*
    Svislé zarovnání medvídka i textu na střed.
  */
  align-items: center;

  /*
    Vodorovné zarovnání obsahu jako celku.
  */
  justify-content: center;

  /* Mezera mezi medvídkem a textem */
  gap: var(--bh-content-gap-desktop);
}


/* =========================================================
   LEVÁ ČÁST – PROSTOR PRO MEDVÍDKA
   ========================================================= */

.bh-price-banner__image-box {
  height: 100%;

  /* Pevná šířka levého prostoru pro medvídka */
  width: var(--bh-image-box-width-desktop);
  flex: 0 0 var(--bh-image-box-width-desktop);

  /*
    Hlavní odsazení medvídka od levého okraje.
    Upravuje se nahoře přes:
    --bh-bear-left-offset-desktop
  */
  padding-left: var(--bh-bear-left-offset-desktop);
  box-sizing: border-box;

  /*
    Zarovnání medvídka uvnitř jeho prostoru.
  */
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /*
    Medvídek může lehce přesahovat svůj vnitřní box,
    ale samotný banner ho stále ořízne podle overflow: hidden.
  */
  overflow: visible;
}


/* =========================================================
   OBRÁZEK MEDVÍDKA
   ========================================================= */

.bh-price-banner__bear {
  width: var(--bh-bear-width-desktop);
  height: auto;

  /*
    Důležité kvůli Elementoru:
    obrázek nesmí být automaticky omezen na šířku svého boxu.
  */
  max-width: none;

  display: block;

  /*
    Jemné doladění pozice medvídka.
    Hlavní odsazení řeš přes --bh-bear-left-offset-desktop.
  */
  transform: translate(
    var(--bh-bear-move-x-desktop),
    var(--bh-bear-move-y-desktop)
  );
}


/* =========================================================
   PRAVÁ ČÁST – PROSTOR PRO TEXT
   ========================================================= */

.bh-price-banner__text-box {
  flex: 1 1 auto;
  height: 100%;

  /*
    Zarovnání textu přesně doprostřed jeho části.
  */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   TEXT BANNERU
   Každé slovo je na samostatném řádku.
   ========================================================= */

.bh-price-banner__text {
  font-family: var(--bh-text-font);
  font-size: var(--bh-text-size-desktop);
  line-height: var(--bh-text-line-height-desktop);
  font-weight: var(--bh-text-weight);
  letter-spacing: var(--bh-text-letter-spacing);

  color: var(--bh-text-color);
  text-align: center;
  white-space: nowrap;

  /*
    Stín textu.
  */
  text-shadow: var(--bh-text-shadow);

  /*
    Obrys textu.
    Zapnutí:
    --bh-text-stroke-width: 1px;
  */
  -webkit-text-stroke-width: var(--bh-text-stroke-width);
  -webkit-text-stroke-color: var(--bh-text-stroke-color);

  /*
    Slova pod sebou, vše zarovnané na střed.
  */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /*
    Animace barvy textu mezi bílou a tyrkysovou.
    Délka animace se nastavuje přes:
    --bh-text-color-animation-speed
  */
  animation: bh-text-color-loop var(--bh-text-color-animation-speed) ease-in-out infinite;
}


/* Každé slovo bude samostatně na jednom řádku */
.bh-price-banner__text span {
  display: block;
}


/* =========================================================
   ANIMACE BARVY TEXTU
   Text plynule mění barvu mezi bílou a tyrkysovou.
   ========================================================= */

@keyframes bh-text-color-loop {
  0% {
    color: var(--bh-text-color-1);
    -webkit-text-fill-color: var(--bh-text-color-1);
  }

  50% {
    color: var(--bh-text-color-2);
    -webkit-text-fill-color: var(--bh-text-color-2);
  }

  100% {
    color: var(--bh-text-color-1);
    -webkit-text-fill-color: var(--bh-text-color-1);
  }
}


/* =========================================================
   TABLET VERZE
   Aktivuje se při šířce obrazovky 1024 px a méně.
   ========================================================= */

@media (max-width: 1024px) {

  .bh-price-banner {
    top: var(--bh-banner-top-tablet);
    width: var(--bh-banner-width-tablet);
    height: var(--bh-banner-height-tablet);
  }

  .bh-price-banner__inner {
    padding: var(--bh-banner-padding-tablet);
    gap: var(--bh-content-gap-tablet);
  }

  .bh-price-banner__image-box {
    width: var(--bh-image-box-width-tablet);
    flex-basis: var(--bh-image-box-width-tablet);

    /*
      Odsazení medvídka od levého okraje na tabletu.
    */
    padding-left: var(--bh-bear-left-offset-tablet);
  }

  .bh-price-banner__bear {
    width: var(--bh-bear-width-tablet);

    transform: translate(
      var(--bh-bear-move-x-tablet),
      var(--bh-bear-move-y-tablet)
    );
  }

  .bh-price-banner__text {
    font-size: var(--bh-text-size-tablet);
    line-height: var(--bh-text-line-height-tablet);
  }
}


/* =========================================================
   MOBILNÍ VERZE
   Aktivuje se při šířce obrazovky 767 px a méně.
   ========================================================= */

@media (max-width: 767px) {

  .bh-price-banner {
    top: var(--bh-banner-top-mobile);
    width: var(--bh-banner-width-mobile);
    height: var(--bh-banner-height-mobile);
  }

  .bh-price-banner__inner {
    padding: var(--bh-banner-padding-mobile);
    gap: var(--bh-content-gap-mobile);
  }

  .bh-price-banner__image-box {
    width: var(--bh-image-box-width-mobile);
    flex-basis: var(--bh-image-box-width-mobile);

    /*
      Odsazení medvídka od levého okraje na mobilu.
    */
    padding-left: var(--bh-bear-left-offset-mobile);
  }

  .bh-price-banner__bear {
    width: var(--bh-bear-width-mobile);

    transform: translate(
      var(--bh-bear-move-x-mobile),
      var(--bh-bear-move-y-mobile)
    );
  }

  .bh-price-banner__text {
    font-size: var(--bh-text-size-mobile);
    line-height: var(--bh-text-line-height-mobile);
  }
}/* End custom CSS */