/**
 * Раздел «Абонемент» в личном кабинете.
 *
 * Размеры считаны от корневого размера темы: в ней он 10px, а не привычные
 * 16px. Поэтому 1.9rem здесь это 19 пикселей и совпадает с текстом её сайта.
 * Писать «как обычно» нельзя: блок выйдет на треть мельче соседнего текста,
 * и это читается как другой шрифт.
 *
 * Цвета, скругления и отступы берутся переменными темы: блок должен меняться
 * вместе с сайтом, а не жить своей жизнью. Запасные значения после запятой —
 * на случай, если переменную переименуют.
 */

/**
 * Значок карточки в сводке кабинета. Рисуем маской, а не элементом кода:
 * элементы Code в Bricks молча пропадают после переноса сайта, пока не
 * пересчитаны подписи.
 */
[data-icon="subscription"]::before {
	content: "";
	inline-size: 2.8rem;
	block-size: 2.8rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='36' height='26' rx='3'/%3E%3Cpath d='M6 19h36'/%3E%3Cpath d='M15 29l4 4 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='36' height='26' rx='3'/%3E%3Cpath d='M6 19h36'/%3E%3Cpath d='M15 29l4 4 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rkids-page {
	max-width: 73.6rem;
	margin-inline: auto;
	font-size: 1.8rem;
	padding-block-end: var(--spacing-2xl, 6.4rem);
}

.rkids-page__title {
	margin-block-end: var(--spacing-s, 2rem);
}

/* Плашка с общим остатком */

.rkids-hero {
	position: relative;
	overflow: hidden;
	padding: var(--spacing-l, 4rem);
	border-radius: var(--radius-4xl, 3.2rem);
	color: #fff;
	background: linear-gradient(135deg, var(--color-orange-bright, #f69d05) 0%, var(--color-orange-dark, #ea5b0c) 100%);
	box-shadow: 0 18px 40px -18px rgba(234, 91, 12, .55);
}

/* Мягкий блик, чтобы плашка не выглядела плоской заливкой. */
.rkids-hero::after {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-end: -15%;
	inline-size: 35.2rem;
	block-size: 35.2rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%);
	pointer-events: none;
}

.rkids-hero__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}

.rkids-hero__label {
	margin: 0;
	font-size: 1.7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

.rkids-hero__chip {
	white-space: nowrap;
	padding: 0.88rem 2.08rem;
	border-radius: 999px;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: .02em;
	background: rgba(255, 255, 255, .22);
	backdrop-filter: blur(2px);
}

.rkids-hero__total {
	display: flex;
	align-items: baseline;
	gap: 0.96rem;
	margin: 0.96rem 0 0;
}

.rkids-hero__total strong {
	font-family: var(--font-display, "Coolvetica", sans-serif);
	font-size: clamp(4.4rem, 9vw, 6.4rem);
	line-height: .95;
	font-weight: 800;
	letter-spacing: -.02em;
}

.rkids-hero__total span {
	font-size: 2.2rem;
	opacity: .9;
}

.rkids-hero__bar {
	overflow: hidden;
	margin-block-start: var(--spacing-s, 2rem);
	block-size: 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .28);
}

.rkids-hero__bar span {
	display: block;
	block-size: 100%;
	border-radius: 999px;
	background: #fff;
}

.rkids-hero__foot {
	margin: 1.12rem 0 0;
	font-size: 1.9rem;
	opacity: .95;
}

/* Карточка отдельного абонемента */

.rkids-list {
	display: grid;
	/* Ячейка сетки по умолчанию не уже своего содержимого. На узком экране
	   карточка из-за этого вылезала за край страницы и появлялась прокрутка
	   вбок. minmax(0,1fr) разрешает ей сжиматься. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.2rem;
	margin: var(--spacing-s, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.rkids-card {
	min-inline-size: 0;
	padding: var(--spacing-s, 2rem);
	border-radius: var(--radius-2xl, 1.6rem);
	color: var(--color-gray-3, #565d62);
	background: var(--color-gray-1, #f4f4f4);
}

.rkids-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 1.6rem;
}

.rkids-card__plan {
	font-family: var(--font-display, "Coolvetica", sans-serif);
	font-size: 2.6rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-black, #17222b);
}

.rkids-card__days {
	padding: 0.8rem 1.76rem;
	border-radius: 999px;
	font-size: 1.7rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--color-gray-3, #565d62);
	background: #fff;
}

/* Меньше недели до конца: срок должен бросаться в глаза. */
.rkids-card__days.is-soon {
	color: #fff;
	background: var(--color-orange-dark, #ea5b0c);
}

/* Строка в карточке кабинета: те же размеры, что у её собственных описаний. */
.rkids-line {
	display: block;
	font-size: 1.75rem;
	line-height: 1.5;
	color: var(--color-gray-3, #565d62);
}

/* Подпись под карточкой: переносим между кусками, а не внутри фразы. */
.rkids-card__foot {
	font-size: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.8rem;
}

.rkids-card__bit {
	white-space: nowrap;
}

/* Нижняя строка плашки живёт по тем же правилам, иначе куски слипаются,
   когда на узком экране прячется точка-разделитель. */
.rkids-hero__foot {
	font-size: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.8rem;
}


/* Занятия плашками: сколько горит, столько и осталось. */
.rkids-card__pips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.64rem;
	margin-block: 1.44rem;
}

.rkids-card__pips span {
	inline-size: 3.6rem;
	block-size: 3.6rem;
	border-radius: 1.12rem;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e2e6e8;
}

.rkids-card__pips .is-left {
	background: linear-gradient(135deg, var(--color-orange-bright, #f69d05), var(--color-orange-dark, #ea5b0c));
	box-shadow: none;
}

/* Большие тарифы: плашек было бы три ряда, поэтому полоса. */
.rkids-card__meter {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-block: 1.44rem;
}

.rkids-card__meter .track {
	overflow: hidden;
	flex: 1;
	block-size: 1.2rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e2e6e8;
}

.rkids-card__meter .track i {
	display: block;
	block-size: 100%;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--color-orange-bright, #f69d05), var(--color-orange-dark, #ea5b0c));
}

.rkids-card__meter b {
	font-size: 2rem;
	white-space: nowrap;
	color: var(--color-black, #17222b);
}

.rkids-card__foot {
	margin: 0;
}

.rkids-card__foot strong {
	font-size: 2.1rem;
	color: var(--color-black, #17222b);
}

.rkids-card__dot {
	margin-inline: 0.56rem;
	opacity: .5;
}

/* Ещё ничего не куплено */

.rkids-balance--empty {
	padding: var(--spacing-l, 4rem);
	border-radius: var(--radius-4xl, 3.2rem);
	text-align: center;
	background: var(--color-gray-1, #f4f4f4);
}

.rkids-balance__empty {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-black, #17222b);
}

.rkids-balance__hint {
	margin: 0.8rem 0 0;
	color: var(--color-gray-3, #565d62);
}

.rkids-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-s, 2rem);
	margin-block-start: var(--spacing-m, 2.8rem);
}

.rkids-page__back {
	color: var(--color-gray-3, #565d62);
	text-decoration: underline;
}

@media (max-width: 64rem) {

	.rkids-card__pips span {
		inline-size: 3.2rem;
		block-size: 3.2rem;
	}
}

/* Узкие телефоны: название тарифа крупным капсом занимало всю строку и
   выталкивало плашку со сроком за край карточки. */
@media (max-width: 40rem) {

	.rkids-card__plan {
		font-size: 2.2rem;
	}

	.rkids-card__days {
		font-size: 1.5rem;
		padding: 0.6rem 1.4rem;
	}

	.rkids-card__pips span {
		inline-size: 2.8rem;
		block-size: 2.8rem;
	}

	/* Точки-разделители на узком экране только мешают: куски и так стоят
	   в столбик. */
	.rkids-card__dot {
		display: none;
	}
}

/**
 * Срок вышел, занятия остались.
 *
 * Плашку не гасим в серый: деньги родителя никуда не делись, и пугать его
 * «мёртвым» видом нельзя. Снимаем только яркость, а рядом ставим пояснение.
 */
.rkids-hero.is-paused {
	filter: saturate(0.55);
}

.rkids-note {
	margin: 1.6rem 0 0;
	padding: 1.6rem 2rem;
	border-radius: var(--radius-2xl, 1.6rem);
	background: var(--color-grey-100, #f4f4f5);
	font-size: 1.75rem;
	line-height: 1.45;
	color: var(--color-grey-700, #3f3f46);
}

.rkids-card__days.is-over {
	background: var(--color-grey-200, #e4e4e7);
	color: var(--color-grey-700, #3f3f46);
}

/**
 * Возвращённый абонемент.
 *
 * Карточку не убираем: родитель должен видеть, что стало с покупкой, иначе
 * занятия просто исчезают со счёта без объяснения. Гасим её и подписываем
 * возвратом. Цвет спокойный, не тревожный: возврат сделали по его же просьбе,
 * это не ошибка и не долг.
 */
.rkids-card.is-refunded {
	opacity: 0.72;
}

.rkids-card.is-refunded .rkids-card__pips span,
.rkids-card.is-refunded .rkids-card__meter .track i {
	background: var(--color-grey-300, #d4d4d8);
}

/**
 * Выбор детей в окне записи Amelia.
 *
 * Живёт внутри её модалки, поэтому размеры в пикселях: у Amelia свой корневой
 * размер шрифта, и rem там означают не то же, что на остальном сайте.
 */
.rkids-kids {
	margin: 16px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f6f7f9;
	font-family: var(--font-body, inherit);
}

.rkids-kids__head {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: #17222b;
}

.rkids-kids__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 15px;
	color: #17222b;
	cursor: pointer;
}

.rkids-kids__row input {
	inline-size: 18px;
	block-size: 18px;
	accent-color: #ea5b0c;
	margin: 0;
}

.rkids-kids__hint {
	margin: 8px 0 0;
	font-size: 13px;
	color: #6b7280;
}

/**
 * Просьба отметить хотя бы одного ребёнка. Появляется, только когда снято всё,
 * и в этот момент кнопка продолжения выключена скриптом.
 */
.rkids-kids__need {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #c8321f;
}

.rkids-kids__need[hidden] {
	display: none;
}

/**
 * Занятия с прошлых абонементов, свёрнутые в одну строку.
 *
 * Абонементы с вышедшим сроком не пропадают: занятия по ним не сгорели. Но
 * показывать их полными карточками нельзя, иначе у постоянного клиента кабинет
 * за год превращается в ленту из полутора десятков карточек.
 */
.rkids-past {
	margin-block-start: 1.6rem;
}

.rkids-past__head {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.6rem 2rem;
	border-radius: 1.6rem;
	background: var(--color-grey-100, #f4f4f5);
	font-size: 1.75rem;
	color: var(--color-gray-3, #565d62);
	cursor: pointer;
	list-style: none;
}

/* Стрелка у details в Safari рисуется своим маркером, убираем и его. */
.rkids-past__head::-webkit-details-marker {
	display: none;
}

.rkids-past__head b {
	margin-inline-start: auto;
	font-weight: 700;
	color: var(--color-black, #17222b);
}

/* Своя стрелка: поворачивается, когда список раскрыт. */
.rkids-past__head::after {
	content: "";
	inline-size: 0.9rem;
	block-size: 0.9rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.2rem, -0.2rem);
	transition: transform 0.15s ease;
}

.rkids-past[open] .rkids-past__head::after {
	transform: rotate(-135deg) translate(-0.2rem, -0.2rem);
}

.rkids-past[open] .rkids-list {
	margin-block-start: 1.6rem;
}

/**
 * Ссылка в кабинет на странице «спасибо за заказ».
 *
 * Кнопка во всю ширину только на телефоне: на широком экране растянутая через
 * всю колонку кнопка выглядит как баннер, а не как действие.
 */
.rkids-thanks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem 2.4rem;
	margin-block-start: 3.2rem;
}

.rkids-thanks__text {
	flex: 1 1 24rem;
	min-inline-size: 0;
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.5;
	color: var(--color-gray-3, #565d62);
}

@media (max-width: 40rem) {
	.rkids-thanks {
		gap: 1.6rem;
	}

	.rkids-thanks__btn {
		inline-size: 100%;
		text-align: center;
	}
}

.rkids-card__days.is-back {
	background: var(--color-grey-200, #e4e4e7);
	color: var(--color-gray-3, #565d62);
	font-weight: 400;
}

/**
 * Количество абонемента в корзине.
 *
 * Своя пара кнопок вместо привычного поля: шаблон корзины в теме свой,
 * поля количества и кнопки «обновить корзину» он не выводит, и покупатель не
 * видел, что берёт два абонемента вместо одного.
 */
.rkids-qty {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	margin-inline-start: 1.2rem;
	vertical-align: middle;
}

.rkids-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.8rem;
	block-size: 2.8rem;
	border: 1px solid var(--color-grey-300, #d4d4d8);
	border-radius: 50%;
	font-size: 1.8rem;
	line-height: 1;
	text-decoration: none;
	color: var(--color-grey-700, #3f3f46);
	transition: background-color .15s ease, border-color .15s ease;
}

.rkids-qty__btn:hover {
	border-color: var(--color-orange, #f59e0b);
	background: var(--color-orange, #f59e0b);
	color: #fff;
}

.rkids-qty__num {
	min-inline-size: 2rem;
	text-align: center;
	font-size: 1.7rem;
	font-weight: 700;
}

/* Подсказка про несколько абонементов: строкой под названием, без плашки. */
.rkids-hint {
	display: block;
	margin-block-start: .6rem;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--color-grey-600, #52525b);
}

/**
 * Предупреждение о поздней записи в окне Amelia.
 *
 * Жёлтое, а не красное: это не отказ, записаться можно. Красным родитель читает
 * «ошибка» и бросает запись на полпути.
 */
.rkids-late {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	border-left: 3px solid #e0a300;
	background: #fff8e6;
	font-family: var(--font-body, inherit);
	font-size: 14px;
	line-height: 1.5;
	color: #5b4708;
}

/**
 * Промокод на пробное занятие.
 *
 * Пунктирная рамка вместо заливки: блок стоит между карточками абонементов и
 * кнопкой покупки, и сплошной фон превращал бы его в третью карточку.
 */
.rkids-promo {
	margin: var(--spacing-s, 2rem) 0 0;
	padding: var(--spacing-s, 2rem);
	border: 1px dashed var(--color-gray-2, #c9ced1);
	border-radius: var(--radius-2xl, 1.6rem);
}

.rkids-promo__title {
	margin: 0;
	font-family: var(--font-display, "Coolvetica", sans-serif);
	font-size: 1.9rem;
	color: var(--color-black, #17222b);
}

.rkids-promo__hint {
	margin: .6rem 0 0;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--color-gray-3, #565d62);
}

.rkids-promo__go {
	margin: var(--spacing-xs, 1.2rem) 0 0;
}

/* То же правило над панелью родителя: там оно объясняет, почему у ближнего
   занятия отмены в меню нет. Ширину держим по панели, а не по экрану. */
.rkids-note--panel {
	max-inline-size: 104rem;
	margin-inline: auto;
	margin-block-end: var(--spacing-s, 2rem);
}

/* Имя и фамилия в настройках учётной записи стоят парой начиная с 992px, но в
   теме есть общее правило form > * + *, и второй столбец получал от него отступ
   сверху, из-за чего стоял на 12px ниже первого. Ниже 992px столбцы идут друг
   под другом, и там этот отступ и есть зазор между ними. */
@media (min-width: 992px) {
	.woocommerce form .form-row-first + .form-row-last {
		margin-top: 0;
	}
}

/**
 * Запись тем, кто уже есть в базе клуба: подсказка на шаге «ваши данные» и
 * замена её английского отказа по занятой почте. Цвета клубные, не свои.
 */
.rkids-signin {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--color-cream, #fff9f0);
	font-family: var(--font-body, inherit);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-black, #17222b);
}

.rkids-login {
	color: var(--color-orange, #e68e02);
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}