@charset "UTF-8";

/*
 * Фирменный стиль Nurbank.
 * Цвета взяты из /images/NurBank.svg: синий #0077C8, жёлтый #FFC72C.
 * Правится ТОЛЬКО CSS — разметка модулей и h.php/f.php не менялись.
 */
:root {
	--nb-blue:#0077C8;
	--nb-blue-dark:#005E9E;
	--nb-blue-light:#3D9BD8;
	--nb-yellow:#FFC72C;
	--nb-yellow-dark:#E9AF12;
	--nb-surface:#EAF3FB;
	--nb-surface-2:#F5FAFD;
	--nb-line:#D6E6F4;
	--nb-ink:#1A1A1A;
	--nb-muted:#5B6B7C;
	--nb-danger:#D93025;
	--nb-radius:24px;
	--nb-radius-sm:14px;
	--nb-shadow:0 12px 32px rgba(0,119,200,0.10);
	--nb-font:"Inter","Segoe UI","Helvetica Neue",Helvetica,Arial,"PT Sans",sans-serif;
}

* {
	scroll-behavior:smooth;
	-webkit-appearance:none;
}
body, html {
	padding:0;
	min-height:100vh;
	font-size:16px;
	display:flex;
	flex-direction:column;
	margin:0;
}

body {
	font-family:var(--nb-font);
	width:100%;
	color:var(--nb-ink);
	font-weight:400;
	font-style:normal;
	position:relative;

	display:flex;
	align-items:center;
	justify-content:center;

	background:#fff;
	background-image:radial-gradient(900px 460px at 50% 8%,rgba(0,119,200,0.07) 0,rgba(0,119,200,0) 70%);
	background-repeat:no-repeat;

	padding:150px 24px 120px;

	font-size:0;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
/* Фирменная полоса сверху: синий с жёлтым акцентом, как в логотипе */
body:before {
	content:"";
	position:fixed;
	left:0;
	right:0;
	top:0;
	height:4px;
	background:linear-gradient(90deg,var(--nb-blue) 0,var(--nb-blue) 72%,var(--nb-yellow) 72%,var(--nb-yellow) 100%);
	z-index:20;
}
body.main {
	background:#fff;
}
body.novf {
	overflow:hidden;
	height:100vh;
}
img {
	height:auto;
	max-width:100%;
}
a img {
	border:0;
	max-width:100%;
}
a {
	color:var(--nb-blue);
	text-decoration:none;
	transition:color 0.2s;
}
:focus {
	outline:0;
}
a:not(.btn):hover,
a:not(.btn):focus {
	color:var(--nb-blue-dark);
	text-decoration:underline;
}
a:hover,
a:focus,
a[class]:hover,
a[class]:focus {
	text-decoration:none;
}
p {
	padding:0;
	margin:0;
}
form {
	padding:0;
	margin:0;
	border:0;
}
p+p,
p+ul,
ul+p,
ol+p,
p+ol {
	margin:16px 0 0;
}
h1,h2,h3,h4,h5 {
	padding:0;
	margin:0;
	font-weight:700;
	letter-spacing:-0.01em;
}
.line {
	display:inline-block;
	width:100%;
	position:relative;
}
.line.hidden {
	display:none;
}
.line>.block {
	display:inline-block;
	float:left;
	vertical-align:top;
	position:relative;
}
.line>.block+.block {
	margin-left:8px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance:none;
	margin:0;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
	display:none;
	-webkit-appearance:none;
}
select::-ms-expand {
	display:none;
}
::selection {
	background:var(--nb-blue);
	color:#fff;
}
::-webkit-scrollbar-track {
	border-radius:0;
	margin:0;
	background-color:var(--nb-surface);
	width:0;
	height:0;
}
::-webkit-scrollbar {
	width:10px;
	height:10px;
}
::-webkit-scrollbar-thumb {
	border-radius:10px;
	background-color:var(--nb-blue);
}
*,
*:after,
*:before {
	box-sizing:border-box;
	font-family:var(--nb-font);

	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
main,
nav,
section,
summary {
	display:block;
	box-sizing:border-box;
	padding:0;
	margin:0;
	clear:both;
}
option {
	color:var(--nb-ink);
	font-size:1rem;
}
label.text,
input.text,
textarea.text {
	font-size:17px;
}
.text.hidden {
	display:none;
}
.t {
	display:table;
	border-collapse:collapse;
}
.t .r {
	display:table-row;
}
.t .r .c {
	display:table-cell;
}

/* ---------- Кнопки ---------- */

.btn {
	display:inline-block;
	height:44px;
	line-height:44px;
	border-radius:999px;
	background:var(--nb-blue);
	border:1px solid var(--nb-blue);
	color:#fff;
	text-align:center;
	font-size:16px;
	padding:0 28px;
	transition:background 0.2s,border-color 0.2s,color 0.2s,box-shadow 0.2s;
	cursor:pointer;
	font-weight:600;
	letter-spacing:0.01em;
}
.btn:hover,
.btn:focus {
	background:var(--nb-blue-dark);
	border-color:var(--nb-blue-dark);
	color:#fff;
	box-shadow:0 6px 18px rgba(0,119,200,0.28);
}
.btn:active {
	box-shadow:none;
	transform:translateY(1px);
}
/* Вторичная кнопка — контурная, как «Подробнее» на сайте банка */
.btn.light,
.message p.share a.btn {
	background:#fff;
	border-color:var(--nb-line);
	color:var(--nb-blue);
}
.btn.light:hover,
.message p.share a.btn:hover {
	background:var(--nb-surface);
	border-color:var(--nb-blue);
	color:var(--nb-blue-dark);
	box-shadow:none;
}

div.bodyBlock {
	flex:1;
}
.hSlider {
	position:relative;
}
.hSlider .container {
	display:flex;
	transform:translateX(0);
}
.hSlider .container.ntr {
	transition:all 0.3s;
}
.body {
	width:1225px;
	margin:0 auto;
}

/* ---------- Логотип ---------- */

div.cutt {
	width:230px;
	height:40px;
	position:absolute;
	left:48px;
	top:52px;
}
div.cutt a {
	display:block;
	width:100%;
	font-size:0;
	transition:opacity 0.2s;
}
div.cutt a:hover {
	opacity:0.85;
}
div.cutt img {
	display:block;
	width:100%;
	height:auto;
}

/* ---------- Блок сокращения ссылки ---------- */

section.newLinkBlock {
	width:620px;
	max-width:100%;
	background:var(--nb-surface);
	border:1px solid var(--nb-line);
	border-radius:var(--nb-radius);
	box-shadow:var(--nb-shadow);
	padding:28px;
}
section.newLinkBlock form {
	position:relative;
}
section.newLinkBlock form input.text {
	height:60px;
	border-radius:999px;
	border:1px solid var(--nb-line);
	background:#fff;
	color:var(--nb-ink);
	padding:0 186px 0 24px;
	width:100%;
	gap:20px;
	transition:border-color 0.2s,box-shadow 0.2s;
}
section.newLinkBlock form input.text::placeholder {
	color:var(--nb-muted);
}
section.newLinkBlock form input.text:hover {
	border-color:var(--nb-blue-light);
}
section.newLinkBlock form input.text:focus {
	border-color:var(--nb-blue);
	box-shadow:0 0 0 4px rgba(0,119,200,0.15);
}
section.newLinkBlock form input.text.error {
	border-color:var(--nb-danger);
	box-shadow:0 0 0 4px rgba(217,48,37,0.12);
}
section.newLinkBlock form input.btn {
	border-radius:999px;
	height:48px;
	line-height:48px;
	position:absolute;
	right:6px;
	top:6px;
	padding:0 30px;
}

/* ---------- Поле «свой код» и разрешение конфликтов ---------- */

section.newLinkBlock form input#code {
	margin:12px 0 0;
	padding:0 24px;
}
.codeHint {
	font-size:13px;
	line-height:1.4;
	color:var(--nb-muted);
	margin:8px 0 0;
	padding:0 24px;
}
.conflictActions {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin:14px 0 0;
}
/* Каждое действие — карточка: что нажимаем и что после этого будет */
.conflictAction {
	display:block;
	width:100%;
	text-align:left;
	background:#fff;
	border:1px solid var(--nb-line);
	border-radius:var(--nb-radius-sm);
	padding:12px 16px;
	cursor:pointer;
	transition:border-color 0.2s,background 0.2s,box-shadow 0.2s;
	font-family:var(--nb-font);
}
.conflictAction:hover,
.conflictAction:focus {
	border-color:var(--nb-blue);
	background:var(--nb-surface-2);
	box-shadow:0 4px 14px rgba(0,119,200,0.12);
}
.conflictAction:active {
	transform:translateY(1px);
	box-shadow:none;
}
.conflictActionTitle {
	display:block;
	font-size:15px;
	font-weight:600;
	color:var(--nb-blue);
}
.conflictActionHint {
	display:block;
	font-size:13px;
	line-height:1.45;
	color:var(--nb-muted);
	margin:4px 0 0;
}
.conflictNote {
	font-size:14px;
	line-height:1.45;
	color:var(--nb-muted);
	margin:12px 0 0;
}

/* ---------- Форма входа ---------- */

section.newLinkBlock.authBlock form {
	display:flex;
	flex-direction:column;
	gap:12px;
	position:static;
}
section.newLinkBlock.authBlock form input.text {
	position:static;
	padding:0 24px;
}
section.newLinkBlock.authBlock form input.btn {
	position:static;
	width:100%;
	height:52px;
	line-height:52px;
	padding:0;
}
.authTitle {
	font-size:22px;
	font-weight:700;
	line-height:1.3;
	color:var(--nb-ink);
	margin:0 0 6px;
}
.authHint {
	font-size:15px;
	line-height:1.45;
	color:var(--nb-muted);
	margin:0 0 20px;
}
.authInfo {
	font-size:14px;
	line-height:1.45;
	color:var(--nb-muted);
	margin:18px 0 0;
	text-align:center;
}
.authInfo b {
	color:var(--nb-ink);
	font-weight:600;
}

/* ---------- Ответ формы ---------- */

.message {
	font-weight:400;
	font-size:15px;
	line-height:1.5;
	background:#fff;
	border:1px solid var(--nb-line);
	border-left:4px solid var(--nb-blue);
	border-radius:var(--nb-radius-sm);
	padding:20px;
	color:var(--nb-ink);
}
.message.error {
	border-left-color:var(--nb-danger);
}
.message.success {
	border-left-color:var(--nb-yellow);
}
#form .message {
	padding:20px;
}
.message p.link {
	text-align:center;
	font-size:22px;
	font-weight:700;
	color:var(--nb-blue);
	background:var(--nb-surface-2);
	border:1px solid var(--nb-line);
	border-radius:var(--nb-radius-sm);
	padding:14px 16px;
	word-break:break-all;
}

/*
 * core.js навешивает класс error на ЛЮБОЙ ответ формы, в том числе на
 * удачный. Успех отличается тем, что внутри есть готовая ссылка p.link —
 * по ней и снимаем «красноту». Разметку при этом не трогаем.
 */
.message.error:has(p.link) {
	border-left-color:var(--nb-blue);
}
form:has(.message p.link) input.text.error {
	border-color:var(--nb-line);
	box-shadow:none;
}
form:has(.message p.link) input.text.error:focus {
	border-color:var(--nb-blue);
	box-shadow:0 0 0 4px rgba(0,119,200,0.15);
}
.message p.qr,
.message p.share {
	text-align:center;
}
.message img {
	display:block;
	margin:16px auto 0;
	padding:12px;
	background:#fff;
	border:1px solid var(--nb-line);
	border-radius:var(--nb-radius-sm);
}
.message p.share a.btn {
	font-size:16px;
}