/* --- Common --- */
.tc-service-list-container {
    transition: all 0.3s ease;
}

.tc-sl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.tc-sl-text {
    transition: all 0.3s ease;
}

/* --- Style 1: Standard List (Default) --- */
.tc-list-style-1 .tc-service-list {
    display: flex;
    flex-direction: column;
}

.tc-list-style-1 .tc-service-list-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}

.tc-list-style-1 .tc-sl-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #1e73be;
    color: #fff;
}

/* --- Style 2: Grid Box --- */
.tc-list-style-2 .tc-service-list {
    display: grid;
    grid-template-columns: repeat(var(--tc-cols, 3), 1fr);
    gap: 20px;
}

.tc-list-style-2 .tc-service-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s;
}

.tc-list-style-2 .tc-service-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.tc-list-style-2 .tc-sl-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    font-size: 24px;
    background-color: #f4f9ff;
    color: #1e73be;
    border-radius: 8px;
}

/* --- Style 3: Minimal Border List --- */
.tc-list-style-3 .tc-service-list {
    display: flex;
    flex-direction: column;
}

.tc-list-style-3 .tc-service-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.tc-list-style-3 .tc-service-list-item:last-child {
    border-bottom: none;
}

.tc-list-style-3 .tc-sl-icon {
    order: 2;
    /* Icon on the right for variety, or keep left? Let's keep left to be consistent with standard, or change. Let's keep Left for consistent logic, conditional class handles order if needed. Actually standard is Left. Let's make this one very simple arrow like. */
    background: transparent;
    color: #1e73be;
    width: auto;
    height: auto;
    margin-right: 15px;
    font-size: 14px;
}

/* --- Style 4: Timeline List --- */
.tc-list-style-4 .tc-service-list {
    position: relative;
    padding-left: 10px;
}

.tc-list-style-4 .tc-service-list::before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 21px;
    /* Center of 24px icon approx */
    width: 2px;
    background: #e1e1e1;
    z-index: 0;
}

.tc-list-style-4 .tc-service-list-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    z-index: 1;
}

.tc-list-style-4 .tc-sl-icon {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #1e73be;
    color: #1e73be;
    border-radius: 50%;
    margin-right: 20px;
    font-size: 12px;
}

/* --- Style 5: Action Button List --- */
.tc-list-style-5 .tc-service-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tc-list-style-5 .tc-service-list-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #1e73be;
    transition: background 0.3s;
}

.tc-list-style-5 .tc-service-list-item:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.tc-list-style-5 .tc-sl-icon {
    width: 30px;
    height: 30px;
    background: rgba(30, 115, 190, 0.1);
    color: #1e73be;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 14px;
}

/* Responsive Grid */
@media (max-width: 767px) {
    .tc-list-style-2 .tc-service-list {
        grid-template-columns: 1fr;
    }
}