/*--------------------------------------------------------------
# Plovoucí prvky na mobilu

Tlačítko Rezervace (div.btnRezervaceMobil, vypisuje inc/site-widgets.php,
mimo stránku /rezervace/) a telefonní číslo (#lt-floating-phone, tamtéž).
Třídu .lt-scrolled jim přidává js/site.js při odscrollování.

Oba prvky sdílejí pravidla pro ukotvení dole, proto jsou v jednom souboru
a v tomhle pořadí - druhé pravidlo záměrně přebíjí barvu z prvního.
--------------------------------------------------------------*/

/*
 * Tlačítko Rezervace se ukotvuje podle ŠÍŘKY OKNA, ne podle device-width.
 *
 * Původní pravidla z Astry používala `min-device-width` a `max-device-width`,
 * což jsou zastaralé vlastnosti mířící na fyzickou obrazovku, ne na okno.
 * Důsledky: na desktopu se tlačítko schovalo (obrazovka >= 800 px) i při
 * zúženém okně, takže se nedalo vyzkoušet, a na zařízeních s obrazovkou
 * 600-800 px se sice zobrazilo, ale neukotvilo dole.
 *
 * Breakpoint 921 px je stejný jako u plovoucího telefonu níž, aby se oba
 * prvky objevovaly a mizely společně.
 */
div.btnRezervaceMobil {
	display: none;
}

@media (max-width: 921px) {
	div.btnRezervaceMobil {
		display: block;
		position: fixed;
		bottom: 2em;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
		z-index: 1000;
	}

	/*
	 * Prázdná plocha kolem tlačítka nesmí brát kliknutí - pruh je přes celou
	 * šířku a překrýval by přepínač jazyků vlevo dole.
	 */
	div.btnRezervaceMobil {
		pointer-events: none;
	}

	div.btnRezervaceMobil.lt-scrolled a {
		pointer-events: auto;
	}
}

li.menuRezervaceBtn a, li.menuRezervaceBtn a:visited,
div.btnRezervaceMobil a, div.btnRezervaceMobil a:visited {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-size: 0.75rem;
	padding: .6em 2em .45em;
	border-radius: .5em;
	color: #fff;
	background-color: #da7c0c;
}

@media (max-width: 600px) {
  #hero-homepage .wp-block-columns > .wp-block-column:nth-child(2) .lt-google-rating {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

#lt-floating-phone {
  display: none;
}

@media (max-width: 921px) {
  #lt-floating-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 15px;
    right: 40px;
    z-index: 99999;
    background: #61CE70;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

#lt-floating-phone,
div.btnRezervaceMobil {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

#lt-floating-phone.lt-scrolled,
div.btnRezervaceMobil.lt-scrolled {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Přebíjí sdílené pravidlo pro tlačítka výše (barva, poloměr, velikost písma).
   Bez !important: stejná specificita (0,1,2), ale tohle je v souboru později,
   takže vyhraje pořadím. Původní !important tu byl kvůli Astře, kterou _s
   nenačítá - není co přebíjet. */
div.btnRezervaceMobil a,
div.btnRezervaceMobil a:visited {
  color: #000;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}