/*
 * Кабінет клієнта.
 *
 * Каркас — бічне меню плюс сітка карток, як у макеті. Картки беруть той
 * самий .koto-panel--riveted, що й головна: кабінет має відчуватися
 * продовженням сайту, а не окремим продуктом.
 */

/* — Гостьові сторінки ————————————————————— */

.koto-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 2rem var(--koto-gutter);
	background:
		radial-gradient(circle at 50% 0%, rgba(184, 135, 70, 0.10), transparent 55%),
		var(--koto-bg);
}

.koto-auth__inner {
	width: 100%;
	max-width: 27rem;
}

.koto-auth__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}

.koto-auth__card {
	padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
}

.koto-auth__title {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-h3);
	line-height: var(--koto-leading-tight);
	margin: 0;
}

.koto-auth__lede {
	margin: 0.5rem 0 1.5rem;
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-snug);
}

.koto-auth__alt,
.koto-auth__back {
	margin: 1.1rem 0 0;
	text-align: center;
	font-size: var(--koto-text-sm);
	color: var(--koto-ink-faint);
}

/* Рядок про оферту під кнопкою: помітний, але не гучніший за кнопку. */
.koto-auth__legal {
	margin: 0.9rem 0 0;
	text-align: center;
	font-size: var(--koto-text-xs);
	line-height: 1.6;
	color: var(--koto-ink-faint);
}

.koto-auth__back a {
	color: var(--koto-ink-faint);
	text-decoration: none;
}

.koto-auth__back a:hover {
	color: var(--koto-amber);
}

/* — Форми ———————————————————————————————— */

.koto-form {
	display: grid;
	gap: 1.1rem;
}

.koto-field {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.koto-field__label {
	font-size: var(--koto-text-sm);
	font-weight: 700;
	color: var(--koto-ink);
}

.koto-input,
.koto-select,
.koto-textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: var(--koto-text-base);
	color: var(--koto-ink);
	background: var(--koto-surface-sunken);
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-sm);
	transition:
		border-color var(--koto-fast) var(--koto-ease),
		box-shadow var(--koto-fast) var(--koto-ease);
}

.koto-textarea {
	min-height: 8rem;
	line-height: var(--koto-leading-normal);
	resize: vertical;
}

.koto-input:focus,
.koto-select:focus,
.koto-textarea:focus {
	outline: none;
	border-color: var(--koto-brass);
	box-shadow: 0 0 0 3px rgba(184, 135, 70, 0.18);
}

.koto-field--bad .koto-input,
.koto-field--bad .koto-textarea {
	border-color: var(--koto-danger);
}

.koto-field__error {
	margin: 0;
	font-size: var(--koto-text-sm);
	color: var(--koto-danger);
}

.koto-field__hint {
	font-size: var(--koto-text-xs);
	color: var(--koto-ink-faint);
}

.koto-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: var(--koto-text-sm);
}

.koto-check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--koto-ink-muted);
}

.koto-check input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--koto-amber);
}

.koto-link {
	color: var(--koto-amber);
	text-decoration: none;
}

.koto-link:hover {
	text-decoration: underline;
}

/*
 * Пастка для роботів. Не display:none — частина ботів такі поля пропускає
 * саме через це. Прибираємо з потоку, лишаючи полем із погляду коду.
 */
.koto-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* — Повідомлення ————————————————————————— */

.koto-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	margin: 0 0 1.25rem;
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-sm);
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-snug);
}

.koto-notice svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 0.05em;
}

.koto-notice--good {
	background: rgba(32, 184, 176, 0.10);
	border-color: var(--koto-line-cool);
	color: var(--koto-teal);
}

.koto-notice--warn {
	background: rgba(243, 168, 59, 0.10);
	border-color: rgba(243, 168, 59, 0.40);
	color: var(--koto-amber);
}

.koto-notice--bad {
	background: rgba(224, 96, 63, 0.12);
	border-color: rgba(224, 96, 63, 0.45);
	color: #F09B82;
}

/* — Каркас кабінету —————————————————————— */

.koto-app {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--koto-bg);
}

.koto-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 17.5rem;
	flex: none;
	padding: 1.5rem 1.1rem;
	background: var(--koto-bg-deep);
	border-right: 1px solid var(--koto-line);
}

.koto-side__brand {
	padding: 0 0.4rem;
}

.koto-logo--side .koto-logo__mark {
	width: 40px;
	height: 40px;
}

.koto-logo--side .koto-logo__word {
	font-size: 1.32rem;
}

.koto-side__nav ul {
	display: grid;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.koto-side__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.72rem 0.9rem;
	border: 1px solid transparent;
	border-radius: var(--koto-radius-sm);
	color: var(--koto-ink-muted);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--koto-fast) var(--koto-ease),
		border-color var(--koto-fast) var(--koto-ease),
		color var(--koto-fast) var(--koto-ease);
}

.koto-side__link svg {
	width: 21px;
	height: 21px;
	flex: none;
}

.koto-side__link:hover {
	background: rgba(184, 135, 70, 0.08);
	color: var(--koto-ink);
}

/*
 * Активний пункт у макеті — картка з латунною рамкою й бурштиновою
 * рискою біля лівого краю.
 */
.koto-side__link.is-current {
	background: var(--koto-surface);
	border-color: var(--koto-line-strong);
	color: var(--koto-amber);
}

.koto-side__link.is-current::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 20%;
	bottom: 20%;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--koto-amber);
}

.koto-side__count {
	margin-left: auto;
	min-width: 1.4rem;
	padding: 0.1rem 0.4rem;
	font-size: var(--koto-text-xs);
	font-weight: 700;
	text-align: center;
	color: var(--koto-ink-on-amber);
	background: var(--koto-amber);
	border-radius: var(--koto-radius-pill);
}

.koto-side__status {
	margin-top: auto;
	padding: 1rem;
}

.koto-side__status p {
	margin: 0.5rem 0 0;
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-snug);
	color: var(--koto-ink-faint);
}

.koto-app__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* — Верхня смуга —————————————————————————— */

.koto-topbar {
	position: sticky;
	top: 0;
	z-index: var(--koto-z-header);
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem var(--koto-gutter);
	background: rgba(8, 20, 31, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--koto-line);
}

.koto-topbar__burger {
	display: none;
	padding: 0.4rem;
	color: var(--koto-ink);
	background: none;
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-sm);
	cursor: pointer;
}

.koto-topbar__burger svg {
	width: 22px;
	height: 22px;
	display: block;
}

.koto-topbar__clock {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	color: var(--koto-ink-muted);
}

.koto-topbar__clock svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--koto-brass);
}

.koto-topbar__time {
	display: block;
	font-weight: 700;
	color: var(--koto-ink);
	font-variant-numeric: tabular-nums;
}

.koto-topbar__date {
	display: block;
	font-size: var(--koto-text-sm);
	color: var(--koto-ink-faint);
}

.koto-usermenu {
	position: relative;
	margin-left: auto;
}

.koto-usermenu summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-pill);
	color: var(--koto-ink);
	font-size: var(--koto-text-sm);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.koto-usermenu summary::-webkit-details-marker {
	display: none;
}

.koto-usermenu summary:hover {
	border-color: var(--koto-line-strong);
}

.koto-usermenu summary svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.koto-usermenu__arrow {
	width: 16px !important;
	height: 16px !important;
	color: var(--koto-ink-faint);
	transition: transform var(--koto-fast) var(--koto-ease);
}

.koto-usermenu[open] .koto-usermenu__arrow {
	transform: rotate(180deg);
}

.koto-usermenu__drop {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	min-width: 12rem;
	padding: 0.4rem;
	display: grid;
	gap: 0.15rem;
	box-shadow: var(--koto-shadow-lift);
}

.koto-usermenu__drop a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.7rem;
	border-radius: var(--koto-radius-sm);
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	text-decoration: none;
}

.koto-usermenu__drop a:hover {
	background: rgba(184, 135, 70, 0.10);
	color: var(--koto-ink);
}

.koto-usermenu__drop svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--koto-brass);
}

.koto-app__main {
	flex: 1;
	padding: clamp(1.25rem, 1rem + 1.2vw, 2rem) var(--koto-gutter) 3rem;
}

/*
 * Персонал бачить кабінет із панеллю WordPress угорі, а вона закріплена
 * поверх усього. Без цього зсуву наша верхня смуга при прокручуванні
 * заїжджала під неї. Нижче 600 px панель перестає бути закріпленою і
 * їде разом зі сторінкою — там зсув уже шкодить.
 */
body.admin-bar .koto-topbar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .koto-topbar {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .koto-topbar {
		top: 0;
	}
}

.koto-app__scrim {
	display: none;
	position: fixed;
	inset: 0;
	z-index: calc(var(--koto-z-menu) - 1);
	background: rgba(5, 14, 23, 0.7);
	border: 0;
	cursor: pointer;
}

/* — Заголовок розділу ————————————————————— */

.koto-cab-head {
	margin-bottom: 1.35rem;
}

.koto-cab-head__title {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-h3);
	line-height: var(--koto-leading-tight);
	margin: 0;
}

.koto-cab-head__lede {
	margin: 0.4rem 0 0;
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	max-width: 46rem;
}

/* — Сітка карток —————————————————————————
 * Дванадцять колонок дають ті самі пропорції, що в макеті: 6/3/3 угорі,
 * 4/4/4 посередині, 8/4 внизу.
 */

.koto-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--koto-gap);
	align-items: start;
}

.koto-grid > * {
	grid-column: span 12;
}

@media (min-width: 40rem) {
	.koto-col-3,
	.koto-col-4 { grid-column: span 6; }
}

.koto-col-12 { grid-column: span 12; }

@media (min-width: 62rem) {
	.koto-col-3 { grid-column: span 3; }
	.koto-col-4 { grid-column: span 4; }
	.koto-col-5 { grid-column: span 5; }
	.koto-col-6 { grid-column: span 6; }
	.koto-col-7 { grid-column: span 7; }
	.koto-col-8 { grid-column: span 8; }
}

/* — Картка кабінету ——————————————————————— */

.koto-card {
	padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
}

/* Сусіди по ряду вирівнюються за найвищим; самотня картка росте за вмістом. */
.koto-grid > .koto-card {
	height: 100%;
}

.koto-card__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 1rem;
}

.koto-card__head svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--koto-brass);
}

.koto-card__title {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-xl);
	line-height: var(--koto-leading-tight);
	margin: 0;
}

.koto-card__head .koto-badge {
	margin-left: auto;
}

.koto-card__foot {
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--koto-line-faint);
}

.koto-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--koto-amber);
	font-size: var(--koto-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.koto-card__more svg {
	width: 16px;
	height: 16px;
	transition: transform var(--koto-fast) var(--koto-ease);
}

.koto-card__more:hover svg {
	transform: translateX(3px);
}

/* — Кільце залишку ———————————————————————— */

.koto-ring {
	position: relative;
	width: 9.5rem;
	height: 9.5rem;
	flex: none;
}

.koto-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.koto-ring circle {
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
}

.koto-ring__track {
	stroke: rgba(255, 255, 255, 0.07);
}

.koto-ring__value {
	stroke: var(--koto-teal);
	filter: drop-shadow(0 0 6px rgba(32, 184, 176, 0.5));
}

.koto-ring--warn .koto-ring__value {
	stroke: var(--koto-amber);
	filter: drop-shadow(0 0 6px rgba(243, 168, 59, 0.5));
}

.koto-ring--bad .koto-ring__value {
	stroke: var(--koto-danger);
	filter: none;
}

.koto-ring--none .koto-ring__value {
	stroke: transparent;
	filter: none;
}

.koto-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	text-align: center;
}

.koto-ring__label strong {
	font-family: var(--koto-font-display);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--koto-ink);
}

.koto-ring__label span {
	font-size: var(--koto-text-xs);
	color: var(--koto-ink-faint);
}

/* — Головна картка послуги ————————————————— */

.koto-service-hero {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	flex-wrap: wrap;
}

.koto-service-hero__main {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1 1 15rem;
	min-width: 0;
}

.koto-service-hero__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	flex: none;
	border-radius: 50%;
	color: var(--koto-brass-light);
	background: var(--koto-surface-sunken);
	border: 1px solid var(--koto-line);
}

.koto-service-hero__icon svg {
	width: 28px;
	height: 28px;
}

/* Крапка стану на краю кружка — видно з одного погляду, чи все гаразд. */
.koto-service-hero__icon::after {
	content: "";
	position: absolute;
	right: 2px;
	bottom: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--koto-surface);
	background: var(--koto-ink-faint);
}

.koto-service-hero__icon--active::after {
	background: var(--koto-teal);
	box-shadow: var(--koto-glow-teal);
}

.koto-service-hero__icon--pending::after {
	background: var(--koto-amber);
}

.koto-service-hero__icon--suspended::after {
	background: var(--koto-danger);
}

.koto-service-hero__info {
	flex: 1 1 auto;
	min-width: 0;
}

.koto-service-hero__kind {
	margin: -0.25rem 0 0.75rem;
	font-size: var(--koto-text-sm);
	color: var(--koto-ink-faint);
}

.koto-service-hero__plan {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-h3);
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

.koto-meta {
	display: grid;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--koto-text-sm);
	color: var(--koto-ink-muted);
}

.koto-meta li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.koto-meta svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--koto-brass);
}

.koto-meta span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* — Ліміти тарифу ————————————————————————— */

.koto-limits {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.koto-limits__row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.75rem;
	background: var(--koto-surface-sunken);
	border: 1px solid var(--koto-line-faint);
	border-radius: var(--koto-radius-sm);
	font-size: var(--koto-text-sm);
}

.koto-limits__row svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--koto-brass);
}

.koto-limits__label {
	color: var(--koto-ink-muted);
}

.koto-limits__value {
	margin-left: auto;
	font-weight: 700;
	color: var(--koto-ink);
	font-variant-numeric: tabular-nums;
}

/* — Велике число (дата продовження) ————————— */

.koto-bignum {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.koto-bignum__icon {
	flex: none;
}

.koto-bignum__value {
	font-family: var(--koto-font-display);
	font-size: 2.6rem;
	line-height: 1;
	margin: 0;
	color: var(--koto-ink);
}

.koto-bignum__unit {
	display: block;
	font-family: var(--koto-font-body);
	font-size: var(--koto-text-base);
	color: var(--koto-ink-muted);
	margin-top: 0.25rem;
}

.koto-bignum__note {
	margin: 0.9rem 0 0;
	font-size: var(--koto-text-sm);
	color: var(--koto-teal);
}

.koto-bignum__note--warn {
	color: var(--koto-amber);
}

.koto-bignum__value--sm {
	font-size: 2rem;
}

/*
 * Стаж і знижка стоять поряд, а сходинки — під ними. На вузькому екрані
 * усе просто в стовпчик: два великі числа поруч на телефоні не вміщаються
 * без переносу всередині самого числа.
 */
.koto-loyalty-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem 3rem;
}

.koto-loyalty-status__now .koto-bignum__value {
	color: var(--koto-teal);
}

.koto-loyalty-status__list {
	margin-top: 1.2rem;
}

.koto-invoice-line {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0 0 0.6rem;
	font-size: var(--koto-text-sm);
}

.koto-meta--spaced {
	margin-top: 0.8rem;
}

/* — Списки рядків ————————————————————————— */

.koto-rows {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.koto-rows > li {
	border-bottom: 1px solid var(--koto-line-faint);
}

.koto-rows > li:last-child {
	border-bottom: 0;
}

.koto-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0;
	color: var(--koto-ink);
	text-decoration: none;
	min-width: 0;
}

.koto-row__name {
	/* min-width потрібен, щоб текст справді стискався, а не розпирав рядок. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--koto-text-sm);
}

.koto-row__aside {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

.koto-row__chevron {
	width: 16px;
	height: 16px;
	color: var(--koto-ink-faint);
	transition: transform var(--koto-fast) var(--koto-ease);
}

a.koto-row:hover .koto-row__chevron {
	color: var(--koto-amber);
	transform: translateX(3px);
}

a.koto-row:hover .koto-row__name {
	color: var(--koto-amber);
}

/* — Таблиця рахунків —————————————————————— */

.koto-table-wrap {
	overflow-x: auto;
}

.koto-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--koto-text-sm);
	white-space: nowrap;
}

.koto-table th,
.koto-table td {
	padding: 0.75rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--koto-line-faint);
}

.koto-table th {
	font-size: var(--koto-text-xs);
	font-weight: 700;
	letter-spacing: var(--koto-tracking-wide);
	text-transform: uppercase;
	color: var(--koto-ink-faint);
}

.koto-table tr:last-child td {
	border-bottom: 0;
}

.koto-table__num {
	font-family: var(--koto-font-mono);
	color: var(--koto-ink);
}

.koto-table__sum {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * Знижка за стаж — рядок із від'ємною сумою. Бірюзовим, бо це добра
 * новина: без кольору мінус у рахунку читається як помилка.
 */
.koto-table tr.is-discount td {
	color: var(--koto-ok);
}

.koto-table td:last-child,
.koto-table th:last-child {
	text-align: right;
}

/*
 * На вузькому екрані таблиця перестає бути таблицею: рядок стає карткою,
 * а заголовок колонки переїжджає в підпис клітинки. Горизонтальний скрол
 * на телефоні читається гірше за будь-яку іншу ваду верстки — там просто
 * не видно половини даних.
 */
@media (max-width: 48rem) {
	.koto-table {
		white-space: normal;
	}

	.koto-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.koto-table tr {
		display: grid;
		gap: 0.35rem;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--koto-line-faint);
	}

	.koto-table tr:last-child {
		border-bottom: 0;
	}

	.koto-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0;
		border: 0;
		text-align: right;
	}

	.koto-table td::before {
		content: attr(data-label);
		flex: none;
		font-size: var(--koto-text-xs);
		font-weight: 700;
		letter-spacing: var(--koto-tracking-wide);
		text-transform: uppercase;
		color: var(--koto-ink-faint);
	}

	/* Клітинка без підпису — це кнопка «Відкрити»; їй заголовок ні до чого. */
	.koto-table td:not([data-label]) {
		justify-content: flex-end;
		padding-top: 0.2rem;
	}
}

/* — Порожній розділ ——————————————————————— */

.koto-empty {
	display: grid;
	justify-items: center;
	gap: 0.85rem;
	padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) 1.25rem;
	text-align: center;
}

.koto-empty__title {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-xl);
	margin: 0;
}

.koto-empty__text {
	margin: 0;
	max-width: 32rem;
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-normal);
}

/* — Листування підтримки —————————————————— */

.koto-thread {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.koto-msg {
	padding: 0.9rem 1.1rem;
	background: var(--koto-surface-sunken);
	border: 1px solid var(--koto-line-faint);
	border-radius: var(--koto-radius);
}

/* Відповіді підтримки — з латунною рамкою: видно, хто говорить. */
.koto-msg--staff {
	background: rgba(184, 135, 70, 0.07);
	border-color: var(--koto-line);
}

.koto-msg__head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
	font-size: var(--koto-text-xs);
}

.koto-msg__who {
	font-weight: 700;
	color: var(--koto-amber);
}

.koto-msg--client .koto-msg__who {
	color: var(--koto-teal);
}

.koto-msg__when {
	color: var(--koto-ink-faint);
}

.koto-msg__body {
	margin: 0;
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-normal);
	color: var(--koto-ink);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* — Дрібне ————————————————————————————— */

.koto-back {
	margin: 0 0 0.9rem;
	font-size: var(--koto-text-sm);
}

.koto-card__subtitle {
	margin: 0 0 0.35rem;
	font-size: var(--koto-text-xs);
	font-weight: 700;
	letter-spacing: var(--koto-tracking-wide);
	text-transform: uppercase;
	color: var(--koto-ink-faint);
}

.koto-row__body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.koto-row__when {
	font-size: var(--koto-text-xs);
	color: var(--koto-ink-faint);
}

/* Підпис колонки, потрібний екранному читачеві й зайвий на екрані. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.koto-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.koto-note {
	margin: 0.85rem 0 0;
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-snug);
	color: var(--koto-ink-faint);
}

.koto-sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.9rem;
	margin-top: 0.9rem;
	border-top: 1px solid var(--koto-line);
	font-size: var(--koto-text-lg);
}

.koto-sum strong {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-h3);
	color: var(--koto-amber);
}

/* — Картка з котиком —————————————————————— */

.koto-helper {
	position: relative;
	overflow: hidden;
	min-height: 13rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.koto-helper__text {
	position: relative;
	z-index: 1;
	max-width: 60%;
}

.koto-helper__hi {
	font-family: var(--koto-font-display);
	font-size: var(--koto-text-xl);
	margin: 0 0 0.4rem;
}

.koto-helper__lede {
	margin: 0 0 1.1rem;
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-snug);
	color: var(--koto-ink-muted);
}

.koto-helper__cat {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 11rem;
	max-width: 46%;
	pointer-events: none;
	mask-image: radial-gradient(circle at 50% 46%, #000 50%, transparent 72%);
}

/* — Вузькі екрани ————————————————————————— */

@media (max-width: 61.99rem) {
	.koto-side {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: var(--koto-z-menu);
		transform: translateX(-100%);
		transition: transform var(--koto-normal) var(--koto-ease);
	}

	.koto-side.is-open {
		transform: translateX(0);
	}

	.koto-topbar__burger {
		display: block;
	}

	body.koto-side-open .koto-app__scrim {
		display: block;
	}

	.koto-helper__text {
		max-width: 100%;
	}

	.koto-helper__cat {
		opacity: 0.35;
	}
}

/*
 * На найвужчих екранах назва й позначка стану вже не вміщаються в один
 * рядок: разом їм треба близько 290 px, а вільного місця лишається 255.
 * Опускаємо позначку під назву — краще два рядки, ніж обрізаний текст.
 */
@media (max-width: 26rem) {
	.koto-row {
		flex-wrap: wrap;
		row-gap: 0.35rem;
	}

	.koto-row__aside {
		margin-left: 0;
	}

	/*
	 * Рядки з датами теж перестаємо обрізати: «Період: 11 вересня 2026 —
	 * 12 жовтня 2026» без другої дати не має сенсу взагалі.
	 */
	.koto-meta li {
		align-items: flex-start;
	}

	.koto-meta svg {
		margin-top: 0.15em;
	}

	.koto-meta span {
		overflow: visible;
		white-space: normal;
	}
}

@media (max-width: 30rem) {
	.koto-topbar__date {
		display: none;
	}

	.koto-usermenu__name {
		display: none;
	}

	.koto-ring {
		width: 8rem;
		height: 8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.koto-side {
		transition: none;
	}
}

/* — Вибір тарифу в замовленні ——————————— */

.koto-picks {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 0.4rem;
	padding: 0;
	list-style: none;
}

.koto-pick {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-sm);
	background: var(--koto-surface-sunken);
	cursor: pointer;
	transition: border-color var(--koto-normal) var(--koto-ease);
}

.koto-pick:hover {
	border-color: var(--koto-line-strong);
}

/*
 * Обраний тариф підсвічуємо всією карткою, а не тільки кружком: у формі
 * з трьох рядків радіокнопка сама по собі майже непомітна.
 */
.koto-pick:has(input:checked) {
	border-color: var(--koto-line-cool);
	background: rgba(32, 184, 176, 0.07);
}

.koto-pick input {
	margin-top: 0.25rem;
	accent-color: var(--koto-teal);
	flex: none;
}

.koto-pick__body {
	display: grid;
	gap: 0.2rem;
}

.koto-pick__name {
	font-family: var(--koto-font-display);
	font-weight: 700;
	font-size: var(--koto-text-lg);
	color: var(--koto-ink);
}

.koto-pick__price {
	color: var(--koto-amber);
	font-weight: 700;
	font-size: var(--koto-text-sm);
}

.koto-pick__note {
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-snug);
}

.koto-steps-mini {
	display: grid;
	gap: 0.7rem;
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	line-height: var(--koto-leading-normal);
}

.koto-steps-mini li::marker {
	color: var(--koto-amber);
	font-weight: 700;
}