/*
 * Why Choose (Index) — interactive tabs + ring stats, on dark section.
 * @package log-core
 */

.tabs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-top: 46px;
}

.index-left { display: flex; flex-direction: column; gap: 18px; }
.tab-list { display: flex; flex-direction: column; gap: 10px; }

.tab-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 20px 17px;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	color: #e6dbe0;
	font-weight: 700;
	font-size: 14px;
	text-align: left;
	transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
	overflow: hidden;
	cursor: pointer;
}

.tab-icon-badge {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	flex-shrink: 0;
	background: rgba(188, 211, 172, .1);
	border: 1px solid rgba(188, 211, 172, .22);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sage-400);
	transition: all .35s var(--ease);
}

.tab-icon-badge .icon { width: 19px; height: 19px; }
.tab-btn-label { flex: 1; }
.tab-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: transparent; }
.tab-progress-fill { display: block; height: 100%; width: 0; background: var(--sage-400); }

@keyframes log-tab-progress-fill {
	from { width: 0%; }
	to { width: 100%; }
}

.tab-btn:hover { background: rgba(255, 255, 255, .07); }
.tab-btn:hover .tab-icon-badge { transform: translateY(-2px); }
.tab-btn.active { background: rgba(188, 211, 172, .12); border-color: rgba(188, 211, 172, .4); color: #fff; }
.tab-btn.active .tab-icon-badge { background: var(--sage-500); color: var(--plum-950); box-shadow: 0 8px 18px rgba(155, 185, 138, .4); transform: scale(1.07); }
.tab-btn.active .tab-progress { background: rgba(255, 255, 255, .08); }

.tab-panel-text {
	margin-top: 0;
	padding: 24px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--r-md);
	font-size: 14.5px;
	line-height: 1.7;
	color: #d6c4cd;
	min-height: 114px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.tab-panel-text.fade { opacity: 0; transform: translateY(6px); }

.panel-icon-chip {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: linear-gradient(150deg, var(--sage-600), var(--plum-700));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
}

.panel-icon-chip .icon { width: 21px; height: 21px; color: #fff; }
.tab-panel-text p { margin: 0; padding-top: 3px; }

.ring-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

.ring-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--r-lg);
	padding: 28px 22px;
	text-align: center;
	width: 190px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.ring-card:hover { transform: translateY(-6px); border-color: rgba(188, 211, 172, .42); box-shadow: var(--shadow-md); }
.ring-svg { width: 108px; height: 108px; margin: 0 auto; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 9; }
.ring-fg { fill: none; stroke: var(--sage-400); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.4s var(--ease); transform: rotate(-90deg); transform-origin: center; }
.ring-num { font-family: var(--display); font-weight: 800; font-size: 21px; fill: #fff; }
.ring-card h5 { margin-top: 14px; font-size: 13px; font-weight: 700; color: #fff; }
.ring-card p { font-size: 11.5px; color: #bda3ad; margin-top: 4px; }

@media (max-width: 980px) {
	.tabs-grid { grid-template-columns: 1fr; }
}