/*
 * Poptávkový formulář (/poptavka) v designu pokladny.
 *
 * Markup formuláře je snapshot Contact Form 7, takže z něj nejde udělat
 * komponentu Nette — třídy `mfn-checkout__*` se do něj ale doplnit dají,
 * a stránka tak sdílí rozvržení i paletu s `checkout.css`. Ten se na
 * /poptavka nahrává spolu s tímhle souborem, viz `PagePresenter::ElementStyles`.
 *
 * Zůstává tu jen to, co pokladna nemá: obal ze snapshotu WordPressu, doplnění
 * vzhledu pro prvky Contact Form 7 (obal pole, hláška u pole, výsledek
 * odeslání) a obsah pravého sloupce — místo souhrnu objednávky je v něm
 * postup a kontakt.
 */

/*
 * BeBuilder má na wrapu s formulářem 10 % okraje z každé strany. Dvousloupcové
 * rozvržení by se do zbytku nevešlo a blok by nelícoval s titulkem stránky.
 *
 * To pravidlo je v inline stylu `mfn-dynamic-inline-css` uvnitř fragmentu, tedy
 * až za tímhle souborem — přebít se dá jen vyšší specificitou, ne pořadím.
 */
.mcb-section .mcb-wrap.mcb-wrap-c3f35f060 > .mcb-wrap-inner.mcb-wrap-inner-c3f35f060 {
	margin-right: 0;
	margin-left: 0;
}

/*
 * Rozvržení. Sloupce jsou z `checkout.css`, řádky se ale skládají jinak:
 * vpravo nestojí souhrn objednávky na celou výšku, ale box, který má končit
 * na stejné lince jako „Kontaktní údaje“ vedle něj. Proto se položky do
 * mřížky umisťují napevno a přes `stretch` se dorovnají na výšku řádku.
 *
 * Mezery mezi řádky dělají spodní okraje boxů, ne `row-gap`: první řádek
 * patří hlášce o odeslání a ta na stránce většinou není — `row-gap` by po ní
 * nechal prázdnou mezeru nad formulářem.
 */
.mfn-inquiry {
	margin-top: 10px;
	align-items: stretch;
	row-gap: 0;
	text-align: left;
}

.mfn-inquiry > .wpcf7-response-output {
	grid-column: 1 / -1;
	grid-row: 1;
}

/*
 * Výšku řádku určuje tenhle box. Pravý sloupec je schválně kratší (viz níž),
 * takže se v kontaktech nedorovnává nic prázdným místem — pole i poznámka
 * pod nimi sedí těsně za sebou.
 */
.mfn-inquiry__box--contact {
	grid-column: 1;
	grid-row: 2;
}

.mfn-inquiry__box--message {
	grid-column: 1;
	grid-row: 3;
}

/*
 * Pravý sloupec dorovnaný na box vlevo. Jeho obsah je záměrně kratší, než se
 * do té výšky vejde — prázdné místo pak zbude tady v šedém boxu, ne mezi poli
 * vlevo. Když do něj přibude text, box vlevo se začne roztahovat.
 *
 * - spodní okraj jako u boxů, jinak by končil o 20 px níž;
 * - horní okraj o půl legendy, protože `<legend>` sedí na horním rámečku
 *   fieldsetu a prohlížeč ho o tuhle půlku posune dolů. Bez toho by pravý
 *   box začínal výš, i když má obě položky stejnou buňku mřížky.
 */
.mfn-inquiry > .mfn-checkout__sidebar {
	grid-column: 2;
	grid-row: 2;
	margin-top: 13px;
	margin-bottom: 20px;
}

/* ---------- Prvky Contact Form 7 ---------- */

/*
 * CF7 obaluje každé pole vlastním <span>. Inline obal by u textarea nechal
 * pod polem mezeru po řádkovém boxu a hláška o chybě by se lepila vedle něj.
 */
.mfn-inquiry .wpcf7-form-control-wrap {
	display: block;
}

/*
 * Telefon: pokladna má číslo v `input[type="text"]`, CF7 ho posílá jako `tel`,
 * takže se výčet typů v `checkout.css` na něj nechytí. Hodnoty jsou schválně
 * stejné — kdyby se měnily tam, musí se přepsat i tady.
 */
.mfn-inquiry .mfn-checkout__field input[type="tel"] {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid #D8DBDC;
	border-radius: 3px;
	background: #fff;
	font-size: 15px;
	line-height: 1.3;
	color: #0B3954;
	box-shadow: none;
}

.mfn-inquiry .mfn-checkout__field textarea {
	min-height: 190px;
	line-height: 1.6;
}

/* Hláška u pole — CF7 ji vypisuje sám, vzhled bere z `mfn-checkout__error`. */
.mfn-inquiry .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #C0392B;
}

.mfn-inquiry .mfn-checkout__field input.wpcf7-not-valid,
.mfn-inquiry .mfn-checkout__field textarea.wpcf7-not-valid {
	border-color: #C0392B;
}

/*
 * Výsledek odeslání. Bez stavové třídy je div prázdný (`aria-hidden`), rámeček
 * by pak visel na stránce sám — proto se kreslí až u konkrétního stavu.
 */
.mfn-inquiry .wpcf7-response-output {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 0;
	border-left: 3px solid #C0392B;
	border-radius: 3px;
	background: #FDF3F2;
	font-size: 14px;
	color: #C0392B;
}

.mfn-inquiry .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}

.wpcf7-form.sent .mfn-inquiry .wpcf7-response-output {
	border-left-color: #46B450;
	background: #F1F8F1;
	color: #2C6E31;
}

/*
 * Tlačítko. Oranžovou #F56804 dává pokladně pravidlo `.woocommerce input.button`
 * z inline stylů hlavičky — to na poptávce neplatí, protože stránka není
 * WooCommerce a formulář je snapshot Contact Form 7. Bez téhle barvy zůstane
 * tlačítko ve výchozí #FFB128 z BeTheme a od pokladny se liší.
 */
.mfn-inquiry .mfn-checkout__actions input[type="submit"],
.mfn-inquiry .mfn-checkout__actions input[type="submit"]:hover {
	background-color: #F56804;
	border-color: transparent;
	color: #fff;
}

/* Odesílání: CF7 ukazuje průběh spinnerem vedle tlačítka. */
.mfn-inquiry .wpcf7-spinner {
	margin: 0;
}

/* ---------- Pravý sloupec ---------- */

/* Titulek blíž k seznamu — pravý sloupec se musí vejít do výšky kontaktů. */
.mfn-inquiry .mfn-checkout__sidebar-title {
	margin-bottom: 8px;
}

.mfn-inquiry__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: inquiry-step;
}

.mfn-inquiry__steps li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 38px;
	font-size: 14px;
	line-height: 1.55;
	color: #6D6F6E;
	counter-increment: inquiry-step;
}

.mfn-inquiry__steps li::before {
	content: counter(inquiry-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #F56804;
	color: #fff;
	font-size: 14px;
	line-height: 1;
}

.mfn-inquiry__contact {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid #E5E7E8;
	font-size: 14px;
	line-height: 1.7;
	color: #6D6F6E;
}

.mfn-inquiry__contact a {
	color: #0B3954;
	font-weight: bold;
}

.mfn-inquiry__contact a:hover {
	color: #F56804;
}

/* ---------- Responzivita ---------- */

@media (max-width: 959px) {
	/* Jeden sloupec — napevno umístěné položky se vrací do běžného toku. */
	.mfn-inquiry > .wpcf7-response-output,
	.mfn-inquiry__box--contact,
	.mfn-inquiry__box--message,
	.mfn-inquiry > .mfn-checkout__sidebar {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0;
	}

	/*
	 * V pokladně jde souhrn nad formulář — tady je vpravo jen doplňující text,
	 * na mobilu tedy patří pod formulář.
	 */
	.mfn-inquiry .mfn-checkout__sidebar {
		order: 0;
	}
}