/* ======================================================================
   Кастомні стилі БФ «Помагаєм» для статичних сторінок.
   Підключається у main.tpl після engine.css.
   Тримайте CSS сторінок тут, а не в тілі статичної сторінки: DLE будує
   og:description із перших ~200 символів тексту сторінки, і вбудований
   <style> потрапляє в анонс у Telegram/Facebook як голий код.
   ---------------------------------------------------------------------- */

/* --- Сторінка «Корисні посилання для батьків» (korisni_posilannya_inklusia) --- */
.pl-intro p { font-size: 17px; line-height: 1.7; }
.pl-tools { margin-top: 10px; }
.pl-search { position: relative; max-width: 620px; margin: 0 auto 26px; }
.pl-search input {
	width: 100%; height: 60px; padding: 0 55px 0 25px;
	border: 2px solid #e3e7ea; border-radius: 50px; background: #fff;
	font-size: 16px; color: #36404c; outline: none;
	-webkit-transition: .25s ease; transition: .25s ease;
}
.pl-search input:focus { border-color: #00aae6; box-shadow: 0 6px 25px rgba(0,170,230,.12); }
.pl-search .pl-search-ico {
	position: absolute; right: 24px; top: 50%; margin-top: -10px;
	font-size: 18px; color: #00aae6; pointer-events: none;
}
.pl-chips { text-align: center; margin-bottom: 6px; }
.pl-chip {
	display: inline-block; margin: 0 5px 10px; padding: 9px 20px;
	border: 2px solid #e3e7ea; border-radius: 50px; background: #fff;
	font-size: 14px; font-weight: 600; line-height: 1.2; color: #36404c;
	cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
	text-transform: none; font-family: inherit; letter-spacing: normal;
	-webkit-transition: .25s ease; transition: .25s ease;
}
.pl-chip .pl-chip-ico { margin-right: 7px; color: #00aae6; font-size: 13px; -webkit-transition: .25s ease; transition: .25s ease; }
.pl-chip .pl-chip-num {
	display: inline-block; margin-left: 8px; padding: 1px 8px;
	border-radius: 20px; background: #eef1f3; color: #7c858f;
	font-size: 12px; font-weight: 700; -webkit-transition: .25s ease; transition: .25s ease;
}
.pl-chip:hover, .pl-chip:focus { border-color: #00aae6; color: #00aae6; }
.pl-chip.pl-active { background: #00aae6; border-color: #00aae6; color: #fff; box-shadow: 0 6px 18px rgba(0,170,230,.25); }
.pl-chip.pl-active .pl-chip-ico { color: #fff; }
.pl-chip.pl-active .pl-chip-num { background: rgba(255,255,255,.25); color: #fff; }
.pl-chip.pl-off { opacity: .4; }
.pl-stat { text-align: center; font-size: 14px; color: #7c858f; margin: 8px 0 0; }
.pl-stat .pl-reset {
	display: none; margin-left: 10px; border-bottom: 1px dashed #00aae6;
	color: #00aae6; cursor: pointer;
}
.pl-stat .pl-reset:hover { border-bottom-color: transparent; }
.pl-card-wrap { margin-bottom: 30px; }
.pl-card { background: #f5f5f5; border-radius: 10px; padding: 30px 25px; height: 100%; }
.pl-card-head { display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	padding-bottom: 18px; border-bottom: 2px solid #00aae6; margin-bottom: 5px;
}
.pl-card-head .pl-card-ico {
	-ms-flex: 0 0 54px; flex: 0 0 54px; width: 54px; height: 54px; margin-right: 18px;
	border-radius: 50%; background: #00aae6; color: #fff;
	font-size: 22px; line-height: 54px; text-align: center;
}
.pl-card-head h3 { margin: 0; font-size: 22px; font-weight: bold; line-height: 1.3; color: #36404c; -ms-flex: 1 1 auto; flex: 1 1 auto; }
.pl-card-head .pl-count { display: block; font-size: 13px; font-weight: 400; color: #7c858f; margin-top: 3px; }
.pl-card-head .pl-card-num {
	-ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 15px; padding: 4px 12px;
	border-radius: 20px; background: #fff; color: #7c858f;
	font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-list li { padding: 0; margin: 0; }
.pl-list li:before { display: none; }
.pl-item { border-top: 1px solid rgba(54,64,76,.13); }
.pl-item.pl-first { border-top: 0; }
.pl-link {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
	padding: 16px 14px; border-radius: 8px; color: #36404c;
	-webkit-transition: .2s ease; transition: .2s ease;
}
.pl-link:hover, .pl-link:focus { background: #fff; text-decoration: none; box-shadow: 0 4px 18px rgba(54,64,76,.08); }
.pl-link .pl-ico {
	-ms-flex: 0 0 30px; flex: 0 0 30px; width: 30px;
	color: #00aae6; font-size: 16px; line-height: 1.6; text-align: left;
}
.pl-link .pl-text { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.pl-link .pl-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; color: #36404c; }
.pl-link:hover .pl-title { color: #00aae6; }
.pl-link .pl-note { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #7c858f; }
.pl-link .pl-arrow {
	-ms-flex: 0 0 20px; flex: 0 0 20px; margin-left: 10px;
	color: #00aae6; font-size: 13px; line-height: 1.9; opacity: 0;
	-webkit-transition: .2s ease; transition: .2s ease;
}
.pl-link:hover .pl-arrow { opacity: 1; }
.pl-empty { display: none; text-align: center; padding: 40px 20px; font-size: 17px; color: #7c858f; }
.pl-empty i { font-size: 34px; color: #d3d9de; }
.pl-note-box { background: #f5f5f5; border-radius: 10px; padding: 30px; }
.pl-note-box p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.pl-card { padding: 25px 15px; }
	.pl-card-head h3 { font-size: 19px; }
	.pl-card-head .pl-card-ico { -ms-flex: 0 0 44px; flex: 0 0 44px; width: 44px; height: 44px; font-size: 18px; line-height: 44px; margin-right: 12px; }
	.pl-card-head .pl-card-num { display: none; }
	.pl-link { padding: 14px 6px; }
	.pl-link .pl-arrow { display: none; }
	.pl-search input { height: 54px; font-size: 15px; }
	.pl-chip { padding: 8px 15px; font-size: 13px; margin: 0 3px 8px; }
}