/*
 * Doplnky k main.min.css.
 *
 * main.min.css je zostavený súbor z cvlite 2.x a nesaháme doň — nemáme
 * k nemu zdroj. Toto sú opravy, ktoré sa doň nedajú zapísať, a každá má
 * napísané, prečo existuje.
 */

/* --------------------------------------------------------------------------
 * Tlačidlo po kliknutí zmodrelo.
 *
 * Foundation má `.button:focus{background-color:#1583cc}` — modrú, ktorá
 * s paletou cvlite nemá nič spoločné. `.button--green` v pôvodnom CSS
 * definuje len `:hover`, na `:focus` sa zabudlo, takže po kliknutí (kým
 * tlačidlo drží zameranie) ostalo modré. `.button--yellow` to má ošetrené,
 * preto sa to prejavovalo len na zelených.
 * -------------------------------------------------------------------------- */
.button--green:focus,
.button--green:active {
	background-color: #41d26b;
	color: #fefefe;
}

.button--transparent:focus,
.button--transparent1:focus {
	background-color: transparent;
}

/* --------------------------------------------------------------------------
 * Zaškrtávacie políčka.
 *
 * Štvorček so zelenou fajkou kreslí main.min.css cez `input + label:before`
 * a umiestňuje ho absolútne. Potrebuje teda popis, voči ktorému sa umiestni —
 * inak štvorček odletí do rohu stránky.
 * -------------------------------------------------------------------------- */
label.form__checkbox {
	position: relative;
	padding-left: 2.2em;
	line-height: 1.6em;
	cursor: pointer;
}

.form__checkbox-wrapper {
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
 * Zoznam technológií pri reakcii na ponuku.
 *
 * Ponuka ich má priemerne tri, ale aj trinásť. Pod sebou by natiahli formulár
 * na dve obrazovky, preto tečú vedľa seba.
 * -------------------------------------------------------------------------- */
.form__checkbox-list .form__checkbox-wrapper {
	display: inline-block;
	margin-right: 28px;
	vertical-align: top;
}

/* --------------------------------------------------------------------------
 * Cenník.
 *
 * Hlavný údaj je CENA — to jediné, kvôli čomu na cenník niekto ide. Preto je
 * najväčšia, prečiarknutá, a až pod ňou menším písmom stojí, že sa teraz
 * neplatí. Opačné poradie („zadarmo" veľkým a cena pod tým) hovorí, že služba
 * nič nestojí; takto hovorí, že stojí devätnásť eur a práve teraz ich neplatíš.
 * To je celý rozdiel medzi „lacné" a „zľava".
 * -------------------------------------------------------------------------- */
.price-list__table td,
.price-list__table th {
	padding: 20px 16px;
	vertical-align: top;
}

.price-list__table .text--table-title {
	font-size: 18px;
	line-height: 1.35;
}

.price-list__table .text--table-description {
	font-size: 15px;
	line-height: 1.6;
	color: #5f6070;
}

.price-list__table td p {
	margin-bottom: 6px;
}

.price-list__price {
	text-align: right;
	white-space: nowrap;
}

/* Prečiarknutá cena je hrdina stránky: musí byť veľká a čiara cez ňu musí
   byť vidieť na prvý pohľad, inak to nie je zľava, len číslo. */
.price-list__price-old {
	font-size: 40px;
	line-height: 1.05;
	font-weight: 700;
	color: #2e2f38;
	margin-bottom: 4px !important;
}

.price-list__price-old del {
	text-decoration: line-through;
	text-decoration-thickness: 3px;
	text-decoration-color: #e2574c;
}

.price-list__price-now {
	font-size: 17px;
	line-height: 1.2;
	font-weight: 700;
	color: #37c761;
	margin-bottom: 8px !important;
}

.price-list__promo {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	background: #fed100;
	color: #9e700e;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.price-list__price-vat {
	font-size: 14px;
	color: #848691;
}

/* ------------------------------------------------------------------
 * Uvítací rozcestník po registrácii (/vitajte)
 *
 * Stránka má zámerne málo obsahu — dve tlačidlá a odkaz. Bez odsadenia
 * by sa zlepila s hlavičkou a pätička by vyskočila do polovice obrazovky.
 * ------------------------------------------------------------------ */
.welcome {
	padding: 70px 0 100px;
}

.welcome__lead {
	margin-bottom: 45px;
}

.welcome__actions {
	margin-bottom: 30px;
}

/* „Zatiaľ sa len obzerám" nie je tretia rovnocenná voľba, je to únikový
   východ — preto nižšia váha aj menšie písmo než majú tlačidlá nad ním. */
.welcome__skip .button {
	font-size: 13px;
	padding-left: 22px;
	padding-right: 22px;
}

/* ------------------------------------------------------------------
 * Nadpis firemnej skupiny v menu prihláseného
 *
 * Menu má dve časti: osobnú a firemnú. Predtým to bolo buď — alebo, takže
 * ich nebolo treba rozlišovať. Teraz sú pod sebou a bez oddelenia by
 * „Úprava profilu" a „Údaje firmy" vyzerali ako dve možnosti toho istého.
 *
 * Nadpis nesie názov firmy, nie slovo „Firma" — čiara navyše by len
 * oddelila, názov aj povie, čo pod ňou nasleduje.
 * ------------------------------------------------------------------ */
.menu--head-profile__group {
	padding: 18px 34px 8px;
	border-top: 1px solid #48d271;
	color: #dffbe8;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Zbaliteľná skupina vo formulári (dnes len fakturačné údaje)
 *
 * Natívne `<details>`, takže bez JavaScriptu. Nadpis má vyzerať ako
 * ostatné `title--beta` nadpisy sekcií — jediný rozdiel je šípka
 * a to, že sa dá kliknúť.
 * ------------------------------------------------------------------ */
.form__section {
	margin-bottom: 10px;
}

.form__section__head {
	display: block;
	cursor: pointer;
	padding: 6px 0 6px 22px;
	position: relative;
	list-style: none;
}

/* Predvolený trojuholník preč — kreslíme si vlastnú šípku, nech sedí
   s typografiou zvyšku formulára. */
.form__section__head::-webkit-details-marker {
	display: none;
}

.form__section__head::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 2px solid #848691;
	border-bottom: 2px solid #848691;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.form__section[open] > .form__section__head::before {
	transform: rotate(45deg);
	margin-top: -3px;
}

.form__section__head:focus-visible {
	outline: 2px solid #37c761;
	outline-offset: 2px;
}

.form__section__head .title--beta {
	display: inline;
	margin: 0;
}

.form__section__hint {
	display: block;
	margin-top: 2px;
	color: #848691;
	font-size: 13px;
}