@CHARSET "UTF-8";

/*
    RRA

    Copyright © 2026, RR LLC. All rights reserved.
*/

/* Epic-PF-001 «Нужна помощь?»: карточка (UI-PF-001-001) и окно запроса звонка (UI-PF-001-002).
   Значения - из прототипа аналитика и макета версии 1 (19.10.2026). Окно живёт в <body> (RivModal),
   поэтому его правила не завязаны на .form. */

/* | Карточка */

/* Карточка стоит отдельным блоком под рамкой формы (UI-PF-001-013), а не в её строках: ширина рамки формы
   (.form.RRForm, max-width 474px), без горизонтальных отступов формы, и на мобильном так же. */
.rraHelpCardWrap { max-width: 474px; margin: 14px auto 0; padding: 0; box-sizing: border-box; }
.rraHelpCardWrap.rraHelpCardPage { max-width: 474px; margin: 24px auto 0; padding: 0 16px; width: 100%; }

.rraHelpCard { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%;
	border: 1px solid #BCDDF4; border-radius: 14px; padding: 12px 14px; background: #fff;
	cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.rraHelpCard:focus { outline: none; }
.rraHelpCard:focus-visible { outline: 2px solid #0C8ADA; outline-offset: 2px; }
.rraHelpCard:hover { border-color: #86C3EC; }

.rraHelpCardIco { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #E7F3FC;
	display: flex; align-items: center; justify-content: center; }
.rraHelpCardTxt { min-width: 0; overflow-wrap: anywhere; }
.rraHelpCardTitle { display: block; font-weight: 500; font-size: 15px; line-height: 1.35; color: #21201f; }
.rraHelpCardSub { display: block; font-size: 13px; line-height: 1.35; color: #5c5f66; }

@media (max-width: 768px) {

	.rraHelpCardWrap.rraHelpCardPage { padding-left: 16px; padding-right: 16px; }

}

/* | Окно */

.rivModal.rraHelpModal { width: 100%; max-width: 420px; box-sizing: border-box; padding: 30px 24px 24px;
	background: #fff; border-radius: 8px; font-size: 15px; color: #2a2d3c; }

.rraHelpModal .rraHelpTitle { margin-bottom: 4px; padding-right: 28px; font-size: 19px; font-weight: 500; }
.rraHelpModal .rraHelpLead { margin-bottom: 14px; font-size: 14px; color: #6d757a; }

.rraHelpModal .rraHelpName { display: block; width: 100%; margin-bottom: 8px; box-sizing: border-box; height: 43px; padding: 0 9px; line-height: normal;
	border: 1px solid #cdcdd0; border-radius: 5px; background: #fff; color: #2a2d3c;
	font-family: inherit; font-size: var(--input-font-size, 15px); font-weight: 300; outline: none; box-shadow: none; }
.rraHelpModal .rraHelpName:focus { border-color: #84bdf2; box-shadow: 0 0 4px #84bdf2; }
.rraHelpModal .rraHelpName.error { border-color: rgba(177, 3, 3, 0.47); color: #a82727; }
.rraHelpModal .rraHelpNameNote { margin: -5px 0 8px; }

.rraHelpModal .rraHelpPhoneRow { display: flex; }
.rraHelpModal .rraHelpCc { flex: 0 0 auto; display: flex; align-items: center; padding: 0 10px; height: 43px; box-sizing: border-box; line-height: normal;
	border: 1px solid #cdcdd0; border-right: 0; border-radius: 5px 0 0 5px; background: #f4f4f4;
	font-size: 15px; color: #2a2d3c; white-space: nowrap; }
.rraHelpModal .rraHelpPhone { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 43px; padding: 0 9px; line-height: normal;
	border: 1px solid #cdcdd0; border-radius: 0 5px 5px 0; background: #fff; color: #2a2d3c;
	font-family: inherit; font-size: var(--input-font-size, 15px); font-weight: 300; outline: none; box-shadow: none; }
.rraHelpModal .rraHelpPhone:focus { border-color: #84bdf2; box-shadow: 0 0 4px #84bdf2; }
.rraHelpModal .rraHelpPhone.error { border-color: rgba(177, 3, 3, 0.47); color: #a82727; }

.rraHelpModal .rraHelpNote { padding-top: 3px; font-size: 12px; line-height: 1.35; color: #c10909; }

.rraHelpModal .rraHelpConsent { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0;
	font-size: 13px; line-height: 1.4; color: #2a2d3c; cursor: pointer; }
.rraHelpModal .rraHelpConsent input { flex: none; margin: 3px 0 0; }
.rraHelpModal .rraHelpConsent a { color: #0b8ada; text-decoration: none; }
.rraHelpModal .rraHelpConsentNote { margin-bottom: 0; }

.rraHelpModal .rraHelpSend { width: 100%; margin-top: 14px; }
.rraHelpModal .rraHelpSend.wait { background: #7fbfe8; border-color: #7fbfe8; color: #fff; }
.rraHelpModal .rraHelpSend.wait::before { content: ""; flex: none; width: 14px; height: 14px; margin-right: 8px;
	border: 2px solid #fff; border-right-color: transparent; border-radius: 50%;
	animation: rraHelpSpin 0.8s linear infinite; }

@keyframes rraHelpSpin { to { transform: rotate(360deg); } }

/* Ответ вместо содержимого окна (UI-PF-001-017) */
.rraHelpModal .rraHelpResText { margin: 2px 0 4px; padding-right: 20px; font-size: 15px; line-height: 1.42; color: #2a2d3c; }
.rraHelpModal .rraHelpResText a { color: #0b8ada; white-space: nowrap; }
.rraHelpModal .rraHelpResSub { font-size: 12px; color: #8f979b; }
.rraHelpModal .rraHelpClose { display: block; width: fit-content; margin: 18px auto 0; background: transparent; border-color: #0C8ADA; color: #0C8ADA; }
.rraHelpModal .rraHelpClose:hover { background: #38a7ed; border-color: #38a7ed; color: #fff; }

/* Экран телефона: окно помещается целиком (UI-PF-001-020) */
@media (max-width: 480px) {

	.rivModal.rraHelpModal { padding: 28px 16px 18px; }

}