/* Документы сайта (соглашение, конфиденциальность, цены, поддержка),
   ссылки на них в подвале и блоки магазина «Что можно купить» и «согласие».
   Цвета — как у остального сайта: фиолетовый #652bfb, жёлтый #ffbc1c, фон #13131d. */

/* ---------- вкладки документов ---------- */
.wl-doc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 22px;
}
.wl-doc-tabs a {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border-radius: 10em;
	border: 2px solid rgba(255, 255, 255, .18);
	background: rgba(10, 10, 18, .55);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.wl-doc-tabs a:hover { color: #fff; text-decoration: none; border-color: rgba(255, 255, 255, .4); }
.wl-doc-tabs a.is-active {
	border-color: #652bfb;
	background: #0b0b14;
	box-shadow: 0 0 20px rgba(101, 43, 251, .45);
}

/* ---------- лист документа ---------- */
.wl-doc {
	background: #fff;
	border-radius: 30px;
	padding: 56px 60px 60px;
	color: #24243a;
	font-size: 16px;
	line-height: 1.7;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
/* колонка текста по центру листа: строка не длиннее ~90 знаков */
.wl-doc > * { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
.wl-doc a { color: #652bfb; font-weight: 600; text-decoration: none; }
.wl-doc a:hover { text-decoration: underline; }
.wl-doc p, .wl-doc ul { margin-top: 12px; margin-bottom: 0; }
.wl-doc strong { color: #000; }
.wl-doc__meta { margin-top: 0 !important; color: #8b8ba3; font-size: 14px; }
.wl-doc__lead {
	margin-top: 20px !important;
	padding: 18px 22px;
	border-left: 4px solid #ffbc1c;
	border-radius: 0 14px 14px 0;
	background: #f6f6fc;
	color: #111;
}
.wl-doc h3 {
	margin-top: 44px;
	margin-bottom: 0;
	padding-top: 26px;
	border-top: 1px solid #ececf5;
	color: #000;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}
.wl-doc h3 span { color: #652bfb; margin-right: 8px; }
.wl-doc .n { color: #8b8ba3; font-weight: 700; margin-right: 6px; }
.wl-doc ul { padding: 0; list-style: none; }
.wl-doc li { position: relative; padding-left: 24px; margin-top: 8px; }
.wl-doc li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .68em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffbc1c;
}

/* таблицы */
.wl-doc__scroll { margin-top: 18px; overflow-x: auto; border: 1px solid #ececf5; border-radius: 16px; }
.wl-doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wl-doc th, .wl-doc td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #ececf5; }
.wl-doc tr:last-child td { border-bottom: 0; }
.wl-doc th { color: #8b8ba3; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #fafafe; }
.wl-doc .wl-price td:nth-child(n+2),
.wl-doc .wl-price th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.wl-doc .wl-price td:nth-child(3) { color: #000; font-weight: 700; }
.wl-doc .wl-price td:nth-child(2) { color: #6b6b85; }
.wl-doc .wl-price .grp td { padding-top: 22px; color: #652bfb; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #fafafe; }
.wl-doc small { display: block; color: #8b8ba3; font-size: 13px; line-height: 1.45; }
.wl-doc .wl-kv td:first-child { width: 34%; color: #6b6b85; }
.wl-doc .wl-kv td:last-child { color: #000; font-weight: 600; }

/* карточки поддержки */
.wl-doc__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 22px; }
.wl-doc__card { padding: 24px; border-radius: 18px; background: #f6f6fc; border: 1px solid #ececf5; }
.wl-doc__card h4 { margin: 0; color: #8b8ba3; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wl-doc__card .big { margin-top: 10px; color: #000; font-size: 19px; font-weight: 700; word-break: break-word; }
.wl-doc__card p { margin-top: 8px; font-size: 14px; color: #6b6b85; }

/* место, которое владелец заполняет перед публикацией */
.todo { background: #ffe14d; color: #1a1300; padding: 1px 7px; border-radius: 5px; font-weight: 700; }

/* ---------- ссылки на документы в подвале ---------- */
.footer-flow .container { flex-wrap: wrap; }
.wl-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
}
/* документы — отдельными кнопками: платёжный сервис требует, чтобы они были на виду на каждой странице */
.wl-legal a {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 10em;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	transition: color .3s ease, border-color .3s ease;
}
.wl-legal a:hover { color: #ffbc1c; border-color: #ffbc1c; text-decoration: none; }

/* кодовое слово платёжного сервиса на время согласования — убрать после регистрации кассы */
.wl-codeword { width: 100%; margin: 14px 0 0; text-align: center; color: rgba(255, 255, 255, .55); font-size: 13px; letter-spacing: .04em; }

/* ---------- магазин ---------- */
.wl-store-consent {
	margin: 18px auto 0;
	max-width: 420px;
	text-align: center;
	color: #222 !important;
	font-size: 13px;
	line-height: 1.5;
}
.wl-store-consent a { color: #3a1fb0; font-weight: 700; text-decoration: underline; }
.intro-screen .intro-block .container-store .right-side .right-side_bottom .right-side-b.wl-buy { padding-left: 0; width: 100%; max-width: 460px; }
.wl-buy .row-p { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.wl-buy .row-p:last-child { border-bottom: 0; }
.wl-buy .row-p b { white-space: nowrap; }
.wl-buy__rate { margin: 10px 0 0; color: #111; font-size: 17px; font-weight: 700; }
.wl-buy__all { display: inline-block; margin-top: 16px; color: #3a1fb0 !important; font-weight: 700; text-decoration: underline; }

@media (max-width: 767px) {
	.wl-doc { padding: 30px 20px 34px; border-radius: 22px; font-size: 15px; }
	.wl-doc h3 { font-size: 19px; margin-top: 34px; padding-top: 20px; }
	.wl-doc th, .wl-doc td { padding: 10px 10px; }
	.wl-doc th { font-size: 10px; }
	.wl-doc .wl-price td:nth-child(n+2) { white-space: normal; }
	.wl-doc .wl-price td:first-child { width: 48%; }
	.wl-doc-tabs a { height: 40px; padding: 0 16px; font-size: 13px; }
}
