/*
 * Компоненти, спільні для сайту й кабінету.
 *
 * Головна впізнавана деталь макета — латунна рамка з мідними заклепками
 * в кутах. Вона винесена в один клас .koto-panel, від якого залежить усе
 * інше: картки послуг, тарифи, кроки, панелі кабінету.
 */

/* — Панель із заклепками ————————————————————— */

.koto-panel {
	position: relative;
	background: var(--koto-surface);
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius);
	box-shadow: var(--koto-shadow-card);
}

/*
 * Заклепки малюємо псевдоелементами: два елементи дають чотири кути,
 * бо кожен несе по дві точки через background-position. Так у розмітці
 * не з'являється чотирьох порожніх <span> заради оздоблення.
 */
.koto-panel--riveted::before,
.koto-panel--riveted::after {
	content: "";
	position: absolute;
	left: var(--koto-rivet-inset);
	right: var(--koto-rivet-inset);
	height: var(--koto-rivet-size);
	background-image: var(--koto-rivet), var(--koto-rivet);
	background-size: var(--koto-rivet-size) var(--koto-rivet-size);
	background-repeat: no-repeat;
	background-position: left center, right center;
	pointer-events: none;
}

.koto-panel--riveted::before { top: var(--koto-rivet-inset); }
.koto-panel--riveted::after { bottom: var(--koto-rivet-inset); }

/* Панель, що реагує на курсор. */
.koto-panel--interactive {
	transition:
		border-color var(--koto-normal) var(--koto-ease),
		background-color var(--koto-normal) var(--koto-ease),
		transform var(--koto-normal) var(--koto-ease),
		box-shadow var(--koto-normal) var(--koto-ease);
}

.koto-panel--interactive:hover {
	background: var(--koto-surface-raised);
	border-color: var(--koto-line-strong);
	transform: translateY(-3px);
	box-shadow: var(--koto-shadow-lift);
}

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

.koto-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.85em 1.7em;
	font-family: var(--koto-font-body);
	font-size: var(--koto-text-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	border-radius: var(--koto-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--koto-fast) var(--koto-ease),
		border-color var(--koto-fast) var(--koto-ease),
		color var(--koto-fast) var(--koto-ease),
		box-shadow var(--koto-fast) var(--koto-ease),
		transform var(--koto-fast) var(--koto-ease);
}

.koto-btn:active {
	transform: translateY(1px);
}

/*
 * SVG без розмірів тягнеться на весь вільний простір кнопки. На вузькій
 * кнопці це непомітно, а на .koto-btn--block іконка займала все поле.
 */
.koto-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Підпис кнопки не переносимо: ряди кнопок і так переходять на новий рядок. */
.koto-btn {
	white-space: nowrap;
}

.koto-btn--primary {
	background: linear-gradient(168deg, var(--koto-amber-bright), var(--koto-amber) 55%, var(--koto-amber-deep));
	color: var(--koto-ink-on-amber);
	border-color: rgba(255, 255, 255, 0.16);
}

.koto-btn--primary:hover {
	background: linear-gradient(168deg, #FFD79A, var(--koto-amber-bright) 55%, var(--koto-amber));
	color: var(--koto-ink-on-amber);
	box-shadow: var(--koto-glow-amber);
}

.koto-btn--ghost {
	background: transparent;
	color: var(--koto-ink);
	border-color: var(--koto-line-strong);
}

.koto-btn--ghost:hover {
	background: rgba(184, 135, 70, 0.12);
	border-color: var(--koto-brass);
	color: var(--koto-ink);
}

.koto-btn--block {
	width: 100%;
}

.koto-btn--sm {
	padding: 0.6em 1.1em;
	font-size: var(--koto-text-sm);
}

/* — Позначки стану ——————————————————————— */

.koto-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.32em 0.8em;
	font-size: var(--koto-text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--koto-radius-pill);
	border: 1px solid transparent;
	white-space: nowrap;
}

.koto-badge--ok {
	background: rgba(32, 184, 176, 0.14);
	border-color: var(--koto-line-cool);
	color: var(--koto-teal);
}

.koto-badge--amber {
	background: rgba(243, 168, 59, 0.14);
	border-color: rgba(243, 168, 59, 0.4);
	color: var(--koto-amber);
}

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

/* Приглушена позначка для того, що вже закрите й дії не потребує. */
.koto-badge--mute {
	background: rgba(168, 186, 200, 0.10);
	border-color: rgba(168, 186, 200, 0.28);
	color: var(--koto-ink-faint);
}

/* — Рядок «Усі системи працюють» ——————————— */

.koto-status-line {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--koto-text-sm);
	color: var(--koto-teal);
}

.koto-status-line__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--koto-teal);
	box-shadow: 0 0 0 3px rgba(32, 184, 176, 0.18);
	flex: none;
}

/* — Іконка в латунному колі ————————————————
 * У макеті іконки послуг стоять у тонкому колі кольору латуні.
 */
.koto-icon-ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: none;
	border: 1px solid var(--koto-line-strong);
	border-radius: var(--koto-radius-sm);
	color: var(--koto-amber);
	background: rgba(184, 135, 70, 0.07);
}

.koto-icon-ring svg {
	width: 26px;
	height: 26px;
}

.koto-icon-ring--circle {
	border-radius: 50%;
}

/* — Список з галочками ——————————————————— */

.koto-checklist {
	display: grid;
	gap: 0.7rem;
}

.koto-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--koto-ink-muted);
}

.koto-checklist svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 0.2em;
	color: var(--koto-teal);
}

.koto-checklist--amber svg {
	color: var(--koto-amber);
}

/* — Розділювач із латуні ————————————————— */

.koto-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--koto-line-strong) 18%, var(--koto-line-strong) 82%, transparent);
}

/* — Телефон, що з'являється після кліку ————— */

.koto-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

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

.koto-phone svg {
	width: 17px;
	height: 17px;
	flex: none;
}

/* Розгорнутий номер уже не кнопка, а посилання — курсор має це показати. */
.koto-phone.is-revealed {
	cursor: pointer;
}

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