:root{
	--case-tracking-primary:#12777d;
	--case-tracking-primary-dark:#0d5c61;
	--case-tracking-primary-light:#e6f4f4;
	--case-tracking-danger:#e74c3c;
	--case-tracking-text:#2b3a3f;
	--case-tracking-muted:#6b7c80;
	--case-tracking-border:#dfe6e7;
	--case-tracking-bg:#d3ebf4;
	--case-tracking-white:#ffffff;
	--case-tracking-radius:10px;
}

.case-tracking div{box-sizing:border-box;}

.case-tracking {
	margin:0;
	font-family:"Segoe UI", "Prompt", sans-serif;
	background:var(--case-tracking-bg);
	color:var(--case-tracking-text);
}

.case-tracking .page{
	max-width:900px;
	margin:0 auto;
	padding:20px;
}

.case-tracking .page-header{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:18px;
}

.case-tracking .page-title{
	font-size:22px;
	margin:0;
	color:var(--case-tracking-primary-dark);
}

.case-tracking .case-type-switch{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}

.case-tracking .case-type-label{
	font-size:14px;
	color:var(--case-tracking-muted);
}

.case-tracking .radio-pill{
	position:relative;
}

.case-tracking .radio-pill input{
	position:absolute;
	opacity:0;
}

.case-tracking .radio-pill span{
	display:inline-block;
	padding:6px 14px;
	border-radius:999px;
	border:1px solid var(--case-tracking-border);
	font-size:13px;
	background:var(--case-tracking-white);
	transition:.15s;
	cursor:pointer;
}

.case-tracking .radio-pill input:checked + span{
	background:var(--case-tracking-primary);
	border-color:var(--case-tracking-primary);
	color:#fff;
}

/* ===== WIZARD SHELL ===== */
.case-tracking .wizard{
	background:var(--case-tracking-white);
	border-radius:var(--case-tracking-radius);
	box-shadow:0 2px 10px rgba(0,0,0,.06);
	overflow:hidden;
}

/* ===== STEPPER ===== */
.case-tracking .wizard-stepper-wrap{
	background:var(--case-tracking-primary-light);
	border-bottom:1px solid var(--case-tracking-border);
	overflow-x:auto;
	white-space:nowrap;
	scrollbar-width: none;
}

.case-tracking .wizard-stepper{
	display:inline-flex;
	align-items:center;
	padding:16px 20px;
	min-width:100%;
}

.case-tracking .wizard-step{
	display:flex;
	align-items:center;
	flex-shrink:0;
	scroll-margin-right: 20px;
	scroll-margin-left: 20px;
}

.case-tracking .wizard-step-circle{
	width:32px;
	height:32px;
	border-radius:50%;
	background:var(--case-tracking-white);
	border:2px solid var(--case-tracking-border);
	color:var(--case-tracking-muted);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	font-weight:600;
	flex-shrink:0;
	transition:.2s;
}

.case-tracking .wizard-step-label{
	margin-left:8px;
	font-size:13px;
	color:var(--case-tracking-muted);
	max-width:120px;
	overflow:hidden;
	text-overflow:ellipsis;
}

.case-tracking .wizard-step.is-completed .wizard-step-circle{
	background:var(--case-tracking-primary);
	border-color:var(--case-tracking-primary);
	color:#fff;
}

.case-tracking .wizard-step.is-completed .wizard-step-label{color:var(--case-tracking-primary-dark);}

.case-tracking .wizard-step.is-active .wizard-step-circle{
	background:var(--case-tracking-white);
	border-color:var(--case-tracking-primary);
	color:var(--case-tracking-primary);
	box-shadow:0 0 0 4px var(--case-tracking-primary-light);
}

.case-tracking .wizard-step.is-active .wizard-step-label{
	color:var(--case-tracking-primary-dark);
	font-weight:600;
}

.case-tracking .wizard-connector{
	width:32px;
	height:2px;
	background:var(--case-tracking-border);
	margin:0 10px;
	flex-shrink:0;
}

.case-tracking .wizard-connector.is-completed{background:var(--case-tracking-primary);}

/* ===== BODY / CARD ===== */
.case-tracking .wizard-body{
	padding:24px;
}

.case-tracking .wizard-card-title{
	font-size:18px;
	font-weight:700;
	color:var(--case-tracking-primary-dark);
	margin:0 0 4px;
}

.case-tracking .wizard-card-subtitle{
	font-size:13px;
	color:var(--case-tracking-muted);
	margin:0 0 18px;
}

.case-tracking .terminal-badge{
	display:inline-block;
	background:#fdecea;
	color:var(--case-tracking-danger);
	font-size:12px;
	font-weight:600;
	padding:3px 10px;
	border-radius:999px;
	margin-bottom:14px;
}

/* ===== FORM ELEMENTS ===== */
/*.case-tracking .form-group{
	margin-bottom:20px;
}*/

.case-tracking .form-label{
	display:block;
	font-size:14px;
	font-weight:600;
	margin-bottom:8px;
	margin-top: 8px;
	color:var(--case-tracking-text);
}

.case-tracking .form-control{
	width:100%;
	padding:10px 12px;
	border:1px solid var(--case-tracking-border);
	border-radius:8px;
	font-size:14px;
	font-family:inherit;
	color:var(--case-tracking-text);
	resize:vertical;
	transition:.15s;
}

.case-tracking .form-control:focus{
	outline:none;
	border-color:var(--case-tracking-primary);
	box-shadow:0 0 0 3px var(--case-tracking-primary-light);
}

.case-tracking textarea.form-control{min-height:90px;}

.case-tracking .form-hint{
	font-size:12px;
	color:var(--case-tracking-muted);
	margin-top:4px;
}

/* ===== RADIO GROUP ===== */
.case-tracking .radio-group{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.case-tracking .radio-card{
	position:relative;
	cursor:pointer;
	/*flex:1 1 200px;*/
	width: 100%;
}

.case-tracking .radio-card input{
	position:absolute;
	opacity:0;
}

.case-tracking .radio-card-box{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	border:1.5px solid var(--case-tracking-border);
	border-radius:8px;
	font-size:14px;
	transition:.15s;
	background:var(--case-tracking-white);
}

.case-tracking .radio-card-dot{
	width:18px;
	height:18px;
	border-radius:50%;
	border:2px solid var(--case-tracking-border);
	flex-shrink:0;
	position:relative;
	transition:.15s;
}

.case-tracking .radio-card input:checked ~ .radio-card-box{
	border-color:var(--case-tracking-primary);
	background:var(--case-tracking-primary-light);
}

.case-tracking .radio-card input:checked ~ .radio-card-box .radio-card-dot{
	border-color:var(--case-tracking-primary);
}

.case-tracking .radio-card input:checked ~ .radio-card-box .radio-card-dot::after{
	content:"";
	position:absolute;
	inset:3px;
	border-radius:50%;
	background:var(--case-tracking-primary);
}

/* ===== FINE GRID ===== */
.case-tracking .fine-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:16px;
}

@media (max-width:560px){
	.case-tracking .fine-grid{grid-template-columns:1fr;}
}

/* ===== INSTALLMENT ===== */
.case-tracking .installment-setup{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:12px;
	align-items:end;
	margin-bottom:16px;
}

@media (max-width:640px){
	.case-tracking .installment-setup{grid-template-columns:1fr;}
}

.case-tracking .installment-table{
	width:100%;
	border-collapse:collapse;
	font-size:13px;
}

.case-tracking .installment-table th, .case-tracking .installment-table td{
	border:1px solid var(--case-tracking-border);
	padding:8px 10px;
	text-align:center;
}

.case-tracking .installment-table th{
	background:var(--case-tracking-primary-light);
	color:var(--case-tracking-primary-dark);
}

/* ===== FOOTER ===== */
.case-tracking .wizard-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:16px 24px;
	border-top:1px solid var(--case-tracking-border);
	background:#fbfcfc;
}

.case-tracking .wizard-footer-info{
	font-size:13px;
	color:var(--case-tracking-muted);
	text-align:center;
}

.case-tracking .btn{
	padding:10px 22px;
	border-radius:8px;
	border:1px solid transparent;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	transition:.15s;
}

.case-tracking .btn-primary{
	background:var(--case-tracking-primary);
	color:#fff;
}

.case-tracking .btn-primary:hover{background:var(--case-tracking-primary-dark);}

.case-tracking .btn-primary:disabled{
	background:#b7cfd0;
	cursor:not-allowed;
}

.case-tracking .btn-outline{
	background:#fff;
	border-color:var(--case-tracking-border);
	color:var(--case-tracking-text);
}

.case-tracking .btn-outline:disabled{
	opacity:.4;
	cursor:not-allowed;
}

/* ===== COMPLETE SCREEN ===== */
.case-tracking .wizard-complete{
	text-align:center;
	padding:30px 10px;
}

.case-tracking .wizard-complete-icon{
	width:60px;height:60px;border-radius:50%;
	background:var(--case-tracking-primary-light);
	color:var(--case-tracking-primary);
	display:flex;align-items:center;justify-content:center;
	font-size:28px;margin:0 auto 16px;
}

@media (max-width:640px){
	.case-tracking .wizard-body{padding:18px;}
	.case-tracking .wizard-footer{padding:14px 18px;}
	.case-tracking .btn{padding:9px 16px;font-size:13px;}
}
