/*

Custom CSS for the Service Process Timeline Component.

Paste this code into the dedicated 'Custom CSS' section of your Zoho Site.

Using !important to ensure these styles override the default Zoho theme.
*/

.timeline-step {
transition: all 0.3s ease-in-out !important;
cursor: pointer !important;
position: relative !important;
}

.timeline-step:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* --- ACTIVE STATE STYLES --- /
.timeline-step.active {
/ Indigo-50 background, Indigo-600 border */
border-color: #4f46e5 !important;
background-color: #f0f3ff !important;
transform: scale(1.02) !important;
}

.timeline-step.active .step-number-ring {
/* Indigo-600 background, white text, Indigo-200 box shadow ring */
background-color: #4f46e5 !important;
color: white !important;
box-shadow: 0 0 0 5px #c7d2fe !important;
}

/* Responsive connector line (desktop only) */
.connector-line {
display: none !important;
position: absolute !important;
height: 2px !important;
background-color: #e5e7eb !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
transform: translateY(-50%) !important;
z-index: 0 !important;
}

/* Show connector line on large screens */
@media (min-width: 1024px) {
.connector-line {
display: block !important;
}
}